从复选框中的输入文本中逐个追加

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>