Select All and Deselect All Checkboxes in a list Using Asp.net

I was in a problem while I was trying to use a checkbox that will select all checkboxes or deselect all the boxes in the check list. This codes gives the important service that while selected, if any one of the check boxes is deselected, the ‘chkHeader’ (check box which selected all) will be deselected. this is an important need of course!

Here,
chkHeader = is the ID of the checkbox which will select all.
chkSelect = is the ID of the checkboxes which are chekboxes of the list.

<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('[id$= chkSelect]').click(function () {
if ($('[id$= chkSelect]').length == $('input[name="chkSelect"]:checked').length) {
('[id$= chkHeader]').attr("checked", "checked");
}
else {
$('[id$= chkHeader]').removeAttr("checked");
}
});
$('[id$= chkHeader]').click(function () {
var slvals = []
if ($(this).is(':checked')) {
$('[id$= chkSelect]').attr("checked", true);
}
else {
$('[id$= chkSelect]').attr("checked", false);
slvals = null;
}
});
})
</script>

Here is the code section that might help you to understand ASP.NET portion code of the selecting all check boxes.

<asp:GridView ID="CheckBoxDemo" runat="server">  
   <Columns>
         <asp:TemplateField>
         <HeaderTemplate>
            <asp:CheckBox ID="chkHeader" runat="server" />
         </HeaderTemplate>
        
          <ItemTemplate>               
                        <asp:CheckBox ID="chkSelect" runat="server" />
            </ItemTemplate>
                  
         </asp:TemplateField>
        
       
        <asp:BoundField DataField="checkbox1" HeaderText="checkbox1" Visible="true"  />
        <asp:BoundField DataField="checkbox2" HeaderText="checkbox2" Visible="true"  />
        <asp:BoundField DataField="checkbox3" HeaderText="checkbox3" Visible="true"  />      
        <asp:BoundField DataField="checkbox4" HeaderText="checkbox4" Visible="true"  />
      
  
   </Columns>       
   </asp:GridView>

# I thank Shuresh for his blog as it helped me to fix my problems.

HTML demo for this javascript segment:

<html><head></head>
<body>
<ul>
<li><label><input type="checkbox" name="chkHeader" value="All"/>
Select All
</label></li>
<li><label><input type="checkbox" name="chkSelect" value="3930"/>Mahmud</label></li>
<li><label><input type="checkbox" name="chkSelect" value="4049"/>Ahmed</label></li>
<li><label><input type="checkbox" name="chkSelect" value="4076"/>Faisal</label></li>
<li><label><input type="checkbox" name="chkSelect" value="4086"/>Srijon</label></li>
<li><label><input type="checkbox" name="chkSelect" value="4087"/>Shovon</label></li>
<li><label><input type="checkbox" name="chkSelect" value="4116"/>Nafee</label></li>

</ul>
</body>
</html>

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s