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
In previous articles i explained How to Fill CheckBoxList from Sql Server table and Validate CheckBoxList using jQuery and Show image preview before uploading using jQuery and Check/uncheck all checkbox in gridview or Delete multiple records from gridview with checkbox selection and Get CheckBoxList selected items in comma separated format and jQuery to Enable,Disable,Show and Hide asp.net controls based on DropDownList selected value
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>
" 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."
4 comments
Click here for commentsSir Please post some server side program like c#.
ReplyWhy always scripting language ?
Hi Shaiwal..i also post asp.net c# articles..and i am working on another one..so please stay connected and keep reading...:)
Replyyou are amazing, thank you
ReplyThanks for you feedback..I am glad you liked this article..stay connected and keep reading...
ReplyIf 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..