JQuery Add Multiple Check Action Values (of Checkboxes) to Input Text

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

Are you looking for a scenario where you uncheck the SD checkbox and the text box becomes blank? — Subhranshu
– Subhranshu, Commented Nov 4, 2014 at 4:02
Do you wish checkbox should checked based on textbox value ? — Bharat Ranpariya
– Bharat Ranpariya, Commented Nov 4, 2014 at 4:52

jwnace · Accepted Answer · 2014-11-04 04:17:19Z

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

Collectives™ on Stack Overflow

JQuery Add Multiple Check Action Values (of Checkboxes) to Input Text

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related