all checkboxes need to be checked and unchecked with the main checkbox

1
votes

Can anyone help me with this?

I have two divs. In one div, I have a checkbox named allcheck, and in the other other div, I have checkboxes with name outcheck. If I check multiple, all need to be checked, and if I uncheck multiple, all should be unchecked. input radio is class of allcheck.

$('.inputradio').click(function(){

    $("INPUT[name='outCheck']").each(function () {
        if (allCheck.checkbox== true) {//multi check is checked
            this.checked = true;
        } else {
            this.checked = false;
        }
    });
});

HTML

This is the div for main checkbox

<div id="actions"><div id="box">
<ul><li class="inputradio"><input name="allCheck" type="checkbox" ></li>
<li class="multiple"><a href="#" class="bt btleft">Multiple</a></li>

This is for child checkboxes:

<ul><li id="outcheckbox"><input name="outCheck" type="checkbox"></li>

Even if one child is checked, if we check the main checkbox, all need to be selected. The code I posted is just inverting the check.

3
javascriptjqueryhtml
Post the html markup also. That would help! – palaѕн
possible duplicate stackoverflow.com/questions/7095039/…, stackoverflow.com/questions/3931622/…, stackoverflow.com/questions/4959703/… – SachinGutte
please post correct html in question itself. It's difficult to read from comments. – SachinGutte
oops sorry..i've posted it now – anu

3 Answers

-1
votes

Try this -

$('input[name=allCheck]').click(function(){
   $("INPUT[name='outCheck']").prop('checked', this.checked);
});

This will toggle all checkboxes having name outCheck on click of allCheck.

See demo

UPDATE

see updated demo here

This works as expected. If all checkboxes are manually checked then main checkbox also changes and vice versa if one child is unchecked, main checkbox also gets unchecked.

1
votes

This code implements functionality to select and deselect all checkboxes

select and deselect

$(".select-all-checkbox").click(function () {
       $('input:checkbox').prop('checked', this.checked);
   });

If one item deselect then button CheckAll is UnCheck

$(".mainCheckboxClass")
        .click(
                function() {
                    if ($('input[class=mainCheckboxClass]:checked').length === $('input[class=mainCheckboxClass]').length)
                        $('.select-all-checkbox').prop("checked", true);
                    else
                        $('.select-all-checkbox').prop("checked", false);
});
-1
votes

Try this:

var $ch = $("input[name='outCheck']").change(function() {
    $all.prop('checked', $ch.filter(':checked').length == $ch.length);
}),
$all = $('input[name=allCheck]').click(function () {
    $ch.prop('checked', this.checked);
});

http://jsfiddle.net/wKgZV/1/

This will select and deselect main checkbox automatically depending on how many outcheck checkboxes are checked.