current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

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, "");
        });
    }
});
share|improve this question
    
Are you looking for a scenario where you uncheck the SD checkbox and the text box becomes blank? – Subhranshu Nov 4 '14 at 4:02
    
Do you wish checkbox should checked based on textbox value ? – bharatpatel Nov 4 '14 at 4:52

1 Answer 1

up vote 0 down vote accepted

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);
share|improve this answer
1  
Excellent.. Its answered, thank you. – aries.wandari Nov 4 '14 at 5:15

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.