在复选框中一个接一个地添加输入文本
在复选框中一个接一个地添加输入文本
提问于 2016-10-06 13:04:39
我有一个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，我需要的是选中一个复选框并只显示他的号码，然后在选中时追加其余的值。
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-10-06 13:15:25
首先要注意的是，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="" />
Stack Overflow用户
发布于 2016-10-06 13:16:08
是你想要的吗？
$('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>
Stack Overflow用户
发布于 2016-10-06 13:20:09
你想这样吗？
$('.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'))
{
return $(this).val();
}
else
{
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39896810
复制相关文章
相似问题
腾讯云开发者
