Geeks With Blogs
hmloo's World of .NET

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="">
<head runat="server">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        .cbRowItem {display:block;}
    <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' : '');

    <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"/>
Posted on Wednesday, February 15, 2012 2:04 PM Jquery | Back to top

Comments on this post: How to check/uncheck all checkbox with Jquery

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © hmloo | Powered by: