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

  ASP.NET Projects

Complete ASPX HTML Codes:- 

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


<!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 id="Head1" 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>

 

(Visited 14 times, 1 visits today)

LEAVE A COMMENT