How to check/uncheck all checkbox with Jquery

There are a lot of solutions for this, but I found most them did not handle the case where user checked or unchecked all of the child checkboxes and it must automatically checked or unchecked the parent checkbox. so I give the following solution:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        .cbRowItem {display:block;}
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var cbHeader = $('.cbHeader input:checkbox');
            var cbRowItem = $('.cbRowItem input:checkbox');
            cbHeader.bind("click", function () {
                cbRowItem.attr('checked', $(this).is(':checked') ? 'checked' : '');
            });
            cbRowItem.bind("click", function () {
                cbHeader.attr('checked', cbRowItem.length == $('.cbRowItem :checked').length ? 'checked' : '');
            });

        });
    
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="display:block;">
    <asp:CheckBox id="CheckBoxAll" runat="server" class="cbHeader" Text="All"/>
    <asp:CheckBox id="CheckBox1" runat="server" class="cbRowItem" Text = "CheckBox 1"/>
    <asp:CheckBox id="CheckBox2" runat="server" class="cbRowItem" Text = "CheckBox 2"/>
    <asp:CheckBox id="CheckBox3" runat="server" class="cbRowItem" Text = "CheckBox 3"/>
    <asp:CheckBox id="CheckBox4" runat="server" class="cbRowItem" Text = "CheckBox 4"/>
    </div>
    </form>
</body>
</html>

Share This Post: