This is simple, but want to show you how to get it working in simple and efficient way. Usually we have a parent check box and then some child checkboxes. Depends on the parent check box selection, all the child checkboxes should behave exactly same. So, below is the Jquery function which will do that magic for you.
function CheckUncheckAllCheckBoxes(objID, checkedValue) {
if (objID == null || objID == undefined )
return;
$(objID + " input[type=checkbox]").each(function() {
this.checked = checkedValue;
});
}
If you observe, I am using two parameters for the function named objID and checkedValue. objID is the parameter for knowing which checkbox group or list we need to check or uncheck? Like, on a page we may have many checkboxes and groups or lists. So, we need a way to find out which group or list we need to check or uncheck? For this reason I added a parameter for the function to check only the checkboxes under that ID or Class. Possible values for the objID are
- #parent Control ID of the element which has the check boxes declared. Example: #ageList
- .parent control class of the element under which all the check boxes defined. Example: .edit
And second parameter, it is for passing the parent selected check box value. If it is ON, then logic will loop through and set the each checkbox to checked otherwise unchecked.
Usage - How to call this method:
Code for check/Uncheck all in ASP.NET
$("#<%=cbAllStates.ClientID %>").click(function() {
CheckUncheckAllCheckBoxes("#<%=cblState.ClientID %>", this.checked);
});Note: cblAllStates is the parent ASP.NET check box which is controlling child. cblState is the asp.net checkboxlist and in our terms child check boxes.
Code for Check/Uncheck all in HTML:
$("#cbAllStates").click(function() {
CheckUncheckAllCheckBoxes("#divChilds", this.checked);
});Note: cbAllStates is the parent check box control and divChilds is the division <DIV< tag which has all the child check boxes present in it.
**UPDATED** 06/22/2010
This is the small update for the check/uncheck the all check box depends on the child check box selection. If any of the child check box is unchecked or the all child check boxes are selected then the all check box will toggle depends on it. Below is the work around.
Example:
Code for Toggling the all check box depends on the child check boxes:
function ToggleSelectAllCheckBox(allCheckBox, checkedValue, obj) {
if (allCheckBox == null || allCheckBox == undefined)
return;
if (!checkedValue)
$(allCheckBox).attr("checked", false);
else {
var areAllChecked = true;
$(obj + " input[type=checkbox]").each(function() {
if (!this.checked) {
areAllChecked = false;
}
});
$(allCheckBox).attr("checked", areAllChecked);
}
}
In the above function param1 is the all child check boxes, param2 is the current child check box selection and param3 is the all check box selector.
How to use:
ASP.NET Checkbox list:
$("#<%=cblAge.ClientID %> input[type=checkbox]").click(function() {
ToggleSelectAllCheckBox("#<%=cbAllAges.ClientID %>", this.checked, "#<%=cblAge.ClientID %>");
});
Note: cblAges is the check box list id and the cblAge is the all check box for the age group. So, the click event is for the all check boxes inside the check box list.
HTML Check boxes:
$(".ageGroup input[type=checkbox]").click(function() {
ToggleSelectAllCheckBox(".ageGroup", this.checked, "#allAgeCheckbox");
});
Note: ".ageGroup" is the div or some parent element which holds all the checkboxes in HTML. "#allAgeCheckbox" is the id of the all checkbox for that age group.
**End of Update**
Hope this will help you to understand how to write code in efficient way and which helps for us in multiple scenarios. Always welcome your valuable comments.
