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

Question

I have question quite similar to javascript-php-add-checkbox-values-to-input-text

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

Answer 1

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/

EDIT: 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);