JQuery 将多个检查操作值（复选框）添加到输入文本答案

【问题标题】：JQuery Add Multiple Check Action Values (of Checkboxes) to Input TextJQuery 将多个检查操作值（复选框）添加到输入文本
【发布时间】：2014-11-04 03:02:32
【问题描述】：

我的问题与javascript-php-add-checkbox-values-to-input-text非常相似

有一个父复选框，有 6 个连续的子复选框。当子复选框被选中时，我创建了一个脚本，父复选框将被选中。如果所有 6 个子复选框都被清除，父复选框也将被清除。有没有办法从输入文本中输入（和删除）这些多重检查操作，因为目前它只识别一个被点击的复选框。我正在使用最新的 jquery。

http://jsfiddle.net/L33jo3j7/

HTML

<input type="checkbox" name="chkcc5" id="chkGrpSD3" value="sd">SD
<input type="checkbox" name="chk5[]" class="chkGrpSD3" value="kelas 1">Kelas 1
<input type="checkbox" name="chk5[]" class="chkGrpSD3" value="kelas 2">Kelas 2
<input type="checkbox" name="chk5[]" class="chkGrpSD3" value="kelas 3">Kelas 3
<input type="checkbox" name="chk5[]" class="chkGrpSD3" value="kelas 4">Kelas 4
<input type="checkbox" name="chk5[]" class="chkGrpSD3" value="kelas 5">Kelas 5
<input type="checkbox" name="chk5[]" class="chkGrpSD3" value="kelas 6">Kelas 6
<input type="text" name="modelos" />

jQuery

$("input.chkGrpSD3").click(function () {
    var flag = $('#chkGrpSD3').is(':checked');

    if (flag === false) {
        $('#chkGrpSD3').prop('checked', true);
    }

    var noOneChecked = $('input[name="chk5[]"]:checked').length === 0;
    if (noOneChecked) {
        $('#chkGrpSD3').prop('checked', false);
    }
});

$("#chkGrpSD3").click(function () {
    if (!this.checked) {
        $('input.chkGrpSD3').prop('checked', false);
    }
});


$(":checkbox").click(function () {

    var delimiter = ";";
    var checkbox = $(this);
    var text = $("input[name='modelos']");

    if (checkbox.is(":checked")) {
        text.val(text.val() + checkbox.val() + delimiter)
    } else {
        text.val(function () {
            return $(this).val().replace(checkbox.val() + delimiter, "");
        });
    }
});

【问题讨论】：

您是否正在寻找取消选中 SD 复选框并且文本框变为空白的场景？
您是否希望根据文本框值检查复选框？

标签： javascript jquery html checkbox

【解决方案1】：

通过稍微简化您的逻辑，我想出了一个解决方案。在文本框中设置值时，单击哪个复选框无关紧要，因此我们不需要关心这一点。我们只需要获取所有选中的复选框并将它们的值放入文本框中。以下 jQuery 将获取页面上所有选中的复选框：$(":checked")。从那里，您可以获取每个值，添加分隔符，并将其附加到文本框值。这是您的小提琴的更新版本来说明这一点：

http://jsfiddle.net/jwnace/ed23pkc4/

编辑：为了清楚起见，这是我添加到小提琴中的代码：

var str = "";

// for each checked checkbox, add the checkbox value and delimiter to the textbox
$(":checked").each(function () {
    str += $(this).val() + delimiter;
});

// set the value of the textbox
text.val(str);

【讨论】：