從複選框中的輸入文本中逐個追加

Question

我有一個jQuery腳本，它將所有複選框值附加到','中的一個<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>