JQuery向输入文本添加多个检查操作值（复选框） [英] JQuery Add Multiple Check Action Values (of Checkboxes) to Input Text

问题描述

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

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

There is a parent checkbox, with 6 consecutive child checkbox. I've created a script when child checkbox checked, parent checkbox will be checked to. And if all 6 child checkboxes cleared, parent checkbox will be cleared also. Is there any way to input (and remove) these multiple check action from input text, since currently its only recognize one checkbox clicked. Im using latest 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, "");
        });
    }
});

推荐答案

我能够通过简化你的逻辑有点。在文本框中设置值时，点击复选框并不重要，因此我们不必担心。我们只需要获取所有选中的复选框，并将其值放在文本框中。以下jQuery将获得页面上所有已选中的复选框： $（：checked）。从那里，你可以只取每个的值，添加分隔符，并将它附加到textbox值。这里是您的小提琴的更新版本说明这一点：

I was able to come up with a solution by simplifying your logic a little bit. When setting the values in the textbox, it doesn't matter what checkbox was clicked, so we don't need to be concerned with that. We just need to get all the checked checkboxes and put their values in the textbox. The following jQuery will get all the checked checkboxes on the page: $(":checked"). From there, you can just take the value of each one, add the delimiter, and append it to the textbox value. Here is an updated version of your fiddle to illustrate this:

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

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

For the sake of clarity, here is the code that I added to the fiddle:

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向输入文本添加多个检查操作值（复选框）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！