체크 상자의 입력 텍스트에 하나씩 추가

Question

나는 모든 체크 박스 값을 ','과 함께 하나의 <input type="text"/>에 추가하는 스크립트를 가지고 있습니다. 그러나 하나의 체크 박스를 선택하면 다른 체크 박스의 모든 값도 추가됩니다. 순서대로 검사 한 것들을 추가 할 수 있습니다. 그들이 선택하는 경우

$('.check_list').on('change', function() { 
 
    var n = $(this).siblings('input:checkbox'); 
 
    var nControl = $('.codeParc'); 
 

 
    if ($(this).prop('checked')) { 
 
    n.prop('checked', true); 
 
    var vals = nControl.map(function() { 
 
     return $(this).val(); 
 
    }).get().join(','); 
 

 
    } else { 
 
    n.prop('checked', false); 
 
    } 
 
    $('#test').val(vals); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input style="cursor: pointer;" type="checkbox" value="" class="check_list"></input> 
 
<input type="checkbox" class="codeParc" value="1"></input> 
 
<input type="checkbox" class="codeParc" value="2"></input> 
 
<input type="checkbox" class="codeParc" value="3"></input> 
 

 
<input type="text" id="test" value=""></input>

이 코드는 내게 하나 개의 체크 박스를 체크 할 때마다 모든 값 1,2,3을 반환, 내가 필요한 것은 하나의 상자를 선택하고 오직 자신의 번호를 표시 한 다음 나머지를 추가하는 것입니다 .

Answer 1

먼저 input 요소는 자동 닫음이므로 <input />이 아니라 <input></input>입니다. 이 같은

체크 박스를 클릭 배열에서 선택한 값을 매핑하고 해당 배열마다의 값으로 input의 텍스트를 업데이트하는 것이 할 수있는 간단한 방법, 뭔가 :

$('.check_list').change(function() { 
 
    $('.codeParc').prop('checked', this.checked); 
 
    updateText(); 
 
}); 
 

 
$('.codeParc').change(function() { 
 
    $('.check_list').prop('checked', $('.codeParc').length == $('.codeParc:checked').length); 
 
    updateText(); 
 
}); 
 

 
function updateText() { 
 
    var checkedValues = $('.codeParc:checked').map(function() { 
 
    return this.value; 
 
    }).get(); 
 
    $('#test').val(checkedValues.join(',')); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input style="cursor: pointer;" type="checkbox" value="" class="check_list" /> 
 
<input type="checkbox" class="codeParc" value="1" /> 
 
<input type="checkbox" class="codeParc" value="2" /> 
 
<input type="checkbox" class="codeParc" value="3" /> 
 
<input type="text" id="test" value="" />

Answer 2

원하는 것은 무엇입니까?

당신이 이렇게 원하는

$('input:checkbox').on('change', function() { 
 
    // toggle all checkbox 
 
    if($(this).hasClass('check_list')){ 
 
    $('.codeParc').prop('checked', $(this).prop('checked')); 
 
    } 
 
    
 
    var vals = $('.codeParc:checked').map(function() { 
 
     return $(this).val(); 
 
    }).get().join(','); 
 
    $('#test').val(vals); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input style="cursor: pointer;" type="checkbox" value="" class="check_list"></input> 
 
<input type="checkbox" class="codeParc" value="1"></input> 
 
<input type="checkbox" class="codeParc" value="2"></input> 
 
<input type="checkbox" class="codeParc" value="3"></input> 
 

 
<input type="text" id="test" value=""></input>

Answer 3

?

$('.check_list').on('change', function() { 
 
    var n = $(this).siblings('input:checkbox'); 
 
    var nControl = $('.codeParc'); 
 

 
    if ($(this).prop('checked')) { 
 
     // n.prop('checked',true); 
 
     var vals = nControl.map(function() { 
 
      if($(this).prop('checked')) 
 
      { 
 
      \t return $(this).val(); 
 
      } 
 
      else 
 
      { 
 
      \t return; 
 
      } 
 
     }).get().join(','); 
 

 
    } else { 
 
     // n.prop('checked',false); 
 
    } 
 
    $('#test').val(vals); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input style="cursor: pointer;" type="checkbox" value="" class="check_list"></input> 
 
<input type="checkbox" class="codeParc" value="1"></input> 
 
<input type="checkbox" class="codeParc" value="2"></input> 
 
<input type="checkbox" class="codeParc" value="3"></input> 
 

 
<input type="text" id="test" value=""></input>