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

Question

I have this code:

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

The code above accurately passes the value of all selected checkboxes (comma-separated) to the input field [selected_1].

However, I want to pass the value of any of the selected checkbox into [name="selected_1"], the second selected checkbox value into [name="selected_2"] and the third selected checkbox to [name="selected_3"] in no given order. Then I want to limit the selection to a maximum of only three check-boxes selected in the form.

This fiddle Limit Checkbox Selection Demonstrates how limiting the selection is achieved.

Now, how do I pass the value of each checkbox selected into the corresponding input field using Javascript or JQuery 3.3.1?

Any help will be greatly appreciated.

Answer 1

You need to maintain some relationship between the checkboxes and inputs, so that when a checkbox is clicked, it's related input value is set, for this, you can use data attributes, like below

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

Now, onclick of checkbox, we can associate it with a textbox and set its value like below,

$(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

I'm not sure why you're doing values.join(', ') instead of setting just a single checkbox value

Working demo assigning single checkbox value to each input