Please disable your adblock and script blockers to view this page
 

jQuery to Check Uncheck Select Deselect all items in Asp.net CheckBoxList on click of Select All CheckBox

jQuery to Check Uncheck  Select Deselect all items in Asp.net CheckBoxList on click of Select All CheckBox Introduction: In this article i am going to explain How to Check/Uncheck or we can say Select/Deselect all the items (CheckBoxes) in CheckBoxList at once on click of single Check All/Select All checkBox in Asp.net using jQuery


 Note: In this article you will learn the following:
  • How to check/uncheck all the items in CheckBoxList(Skills) by clicking on a CheckBox.(Select All)
  • How to check "Select All checkbox" if all the items in "Skills CheckBoxList" is checked
  • How to uncheck "Select All checkbox" if any of the items in "Skills CheckBoxList" is unchecked 
Description: While working on asp.net project i got the requirement to implement the functionality where user has to select his technical skills by selecting from the various skills. So I placed a CheckBoxList control populated with various skills and also placed a CheckBox control for Select All options so that user can select and deselect all the skills at once if required. Here in this article example you will learn how to perform this task easily using jQuery.

Implementation:  Below is the HTML Source of the page having the controls and jQuery script required for this demonstration.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
        //Check all/UncheckAll skills if Select All is Checked/UnChecked
            $("#<%=chkSelectAll.ClientID %>").click(function () {
                $("[id*=chkSkills] input:checkbox").prop('checked', this.checked);
            });

            $("[id*=chkSkills] input:checkbox").click(function () {
            //If Select All checkbox is checked but Skill checkbox is unchecked then uncheck
                if ($("#<%= chkSelectAll.ClientID %>").prop('checked') == true && this.checked == false) {
                    $("#<%= chkSelectAll.ClientID %>").prop('checked', false);
                }
                else {
                    var flag = true;
                    //If any of the Skills Checkbox is unchecked then also Uncheck Select All Checkbox
                    $("[id*=chkSkills] input:checkbox").each(function () {
                        if (this.checked == false)
                            flag = false;
                    }
                );
                    //If all of the Skills Checkbox is checked then also check Select All Checkbox
                    $("#<%= chkSelectAll.ClientID %>").prop('checked', flag);
                }
            });           
        }); 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <fieldset style="width:250px;">
    <legend>Select your technical skills</legend>
      <asp:CheckBox ID="chkSelectAll" runat="server" Text="Select All" />
        <br />
        <asp:CheckBoxList ID="chkSkills" runat="server" RepeatColumns="2" RepeatDirection="Horizontal">
            <asp:ListItem Value="1">Asp.Net</asp:ListItem>
            <asp:ListItem Value="2">MVC</asp:ListItem>
            <asp:ListItem Value="3">jQuery</asp:ListItem>
            <asp:ListItem Value="4">WCF</asp:ListItem>
        </asp:CheckBoxList>
    </fieldset>     
    </div>
    </form>
</body>
</html>

Now over to you:
" I hope you have learned how to Check Uncheck all items in CheckBoxList on click of Select All CheckBox with this example and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Previous
Next Post »

4 comments

Click here for comments
August 15, 2014 ×

Sir Please post some server side program like c#.
Why always scripting language ?

Reply
avatar
August 17, 2014 ×

Hi Shaiwal..i also post asp.net c# articles..and i am working on another one..so please stay connected and keep reading...:)

Reply
avatar
Anonymous
admin
January 05, 2016 ×

you are amazing, thank you

Reply
avatar
February 08, 2016 ×

Thanks for you feedback..I am glad you liked this article..stay connected and keep reading...

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily.. ConversionConversion EmoticonEmoticon