Question

我有此代码：

<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 “]没有指定的顺序。然后，我想将选择范围限制为表单中最多只能选中三个复选框。

这个小提琴Limit Checkbox Selection演示了如何限制选择。

现在，如何使用Javascript或JQuery 3.3.1将选中的每个复选框的值传递到相应的输入字段中？

任何帮助将不胜感激。

Answer 1

您需要保持复选框和输入之间的某种关系，以便在单击复选框时设置其相关输入值，为此，您可以使用数据属性，如下所示

<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" />

现在，单击复选框时，我们可以将其与文本框关联并按如下所示设置其值，

$(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(', ')});
    });
});

Working demo

我不确定为什么要执行values.join（'，'），而不是只设置一个复选框值

Working demo assigning single checkbox value to each input

将多个选定复选框的值传递到多个相应的输入字段中

1 个答案: