将多个选中复选框的值传递到多个相应的输入字段中
将多个选中复选框的值传递到多个相应的输入字段中
提问于 2018-07-01 07:39:37
我有这样的代码：
<label><input type="checkbox" />A</label><br />
<label><input type="checkbox" />B</label><br />
<label><input type="checkbox" />C</label><br />
<label><input type="checkbox" />D</label><br />
<input name="selected_1" />
<input name="selected_2" />
<input name="selected_3" />
$(function() {
$('input').on('click', function() {
var values = [];
$('input:checked').each(function() {
values.push($(this).parent().text());
});
$('[name="selected_1"]').attr({value: values.join(', ')});
});
});上面的代码准确地将所有选中的复选框(以逗号分隔)的值传递给输入字段selected_1。
但是，我希望将选中的任何复选框的值传递到name="selected_1“中，将第二个选中的复选框值传递到name="selected_2”中，并将第三个选中的复选框的值传递给name="selected_3“，而不是按照给定的顺序。然后，我希望将选择限制为在表单中最多选中三个复选框。
这个fiddle Limit Checkbox Selection演示了如何实现限制选择。
现在，如何使用Javascript或JQuery 3.3.1将选中的每个复选框的值传递到相应的输入字段？
任何帮助都将不胜感激。
Stack Overflow用户
回答已采纳
发布于 2018-07-01 07:51:34
您需要维护复选框和输入之间的一些关系，以便在单击复选框时设置其相关的输入值，为此，您可以使用数据属性，如下所示
<label><input type="checkbox" data-input="selected_1" />A</label><br />
<label><input type="checkbox" data-input="selected_2"/>B</label><br />
<label><input type="checkbox" data-input="selected_3"/>C</label><br />
<label><input type="checkbox" data-input="selected_4"/>D</label><br />
<input name="selected_1" />
<input name="selected_2" />
<input name="selected_3" />现在，单击checkbox，我们可以将其与文本框关联并设置其值，如下所示：
$(function() {
$('input[type="checkbox"]').on('click', function() {
var values = [];
$('input:checked').each(function() {
values.push($(this).parent().text());
});
$('[name="'+$(this).attr("data-input")+'"]').attr({value: values.join(', ')});
});
});我不知道为什么要使用values.join('，')，而不是只设置单个复选框值
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51119355
复制相关文章
相似问题
腾讯云开发者
