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

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.


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


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.



Try this -

   $("INPUT[name='outCheck']").prop('checked', this.checked);

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

See demo


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.


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

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

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

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


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.