チェックボックスの入力テキストに1つずつ追加します

Question

のすべてのチェックボックス値を','に1つ追加するスクリプトがjQueryですが、チェックボックスをオンにすると他のチェックボックスのすべての値も追加されますチェックしたものを順番に追加します。

$('.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つのチェックボックスをチェックするたびにこのコードは、私は必要なもの、1,2,3私にすべての値を返して1]チェックボックスをオンにして唯一の彼の番号を表示し、それらがチェックされたときに、残りを追加することです。

Answer 1

最初に、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="" />

：これを行うには

簡単な方法は、このようなものをチェックボックスがクリックされるたびに配列にで選択された値をマッピングし、その配列の値を持つinputのテキストを更新するだろう

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>