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

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