Передать значение нескольких выбранных флажков в несколько соответствующих полей ввода

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 "] ни в каком порядке. Затем я хочу ограничить выбор максимум тремя флажками, выбранными в форме.

Эта скрипка Предел выбора флажка Демонстрирует, как достигается ограничение выбора.

Теперь, как мне передать значение каждого флажка, выбранного в соответствующее поле ввода, используя 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(', ')});
    });
});

Рабочая демонстрация

Я не уверен, почему вы используете values.join (',') вместо установки только одного значения флажка

Рабочая демонстрация, назначающая отдельное значение флажка для каждого входа