Question

我的问题与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, "");
        });
    }
});

Answer 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);

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

1 个答案: