By 07/02/2014 20 Comments

How To Check/Uncheck All Items in a CheckBoxList using jQuery

Check and uncheck all items in checkboxes

  • We have a website which displays the list of products in checkboxes, when user clicks the above checkbox once than all checkboxes checked automatically.
  • It can be easily done in asp.net using JQuery

More description

In this post, when the user clicks the checkbox (Select/De-select All), we reference all input elements of the checkbox type inside the table, and set the ‘checked’ value of the referenced elements to true or false, based on the checked value of the ‘Select/De-select Alll’ checkbox.

Following code describes, when a user checks on a single checkbox, all checkboxes will be checked automatically

jQuery Code snippet

<script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script> <!-- call jquery file or library into asp.net page --->
    <script>
        $(document).ready(function() { // this is a function which is called by browser when it loads a webpage

            var $checkBoxAll = $('[id$="TT_CheckboxAll"]'); // assign main checkbox into a variable
            var $ChkBoxlst = $("table.checkboxlst input:checkbox"); // assign all checkboxes in to a variable

            $checkBoxAll.click(function () { // trigger click event when main checkbox will be clicked

                $ChkBoxlst
                .attr('checked', $checkBoxAll // attr() method checks all checkboxes
                .is(':checked'));
            });

            $ChkBoxlst.click( // trigger an event click
            function(e) {
                if (!$(this)[0].checked) { // check if all checkboxes is checked
                    $checkBoxAll.attr("checked", false); // un check the all checkbxes using attr() method, passing false as a second parameter

                }

                });

            });

    </script>

ASP.NET Code snippet

<!--- Following code renders the checkboxes and a label control on browser --->

<asp:Label runat="server" Text="Check/Uncheck all checkboxes at once using the 'Select/De-select All' checkbox"></asp:Label>
        <br/> <br/>
        <asp:CheckBox ID="TT_CheckboxAll" runat="server" Text="Select/De-select All" />
        <br /><hr />
        <asp:CheckBoxList ID="TT_CheckboxList" runat="server" class="checkboxlst">
        <asp:ListItem Text="Option 1" Value="1" />
        <asp:ListItem Text="Option 2" Value="2" />
        <asp:ListItem Text="Option 3" Value="3" />
        <asp:ListItem Text="Option 4" Value="4" />
        <asp:ListItem Text="Option 5" Value="5" />
        </asp:CheckBoxList>






Posted in: ASP.NET, jQuery

Leave your valuable Comment

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .