Check Uncheck All Checkboxes On The Basis Of Another Checkbox
Solution 1:
jQuery way to do it.
This is the only jQuery code that I need to achieve the given functionality.
$(document).ready(function() {
$('[id$=checkAllExts]').click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("[id*=cbExtList_]").change(function () {
if ($('input[id*=cbExtList_][type=checkbox]:checked').length == $('input[id*=cbExtList_][type=checkbox]').length) {
$('[id$=checkAllExts]').prop('checked', true);
} else {
$('[id$=checkAllExts]').prop('checked', false);
}
});
});
To get IDs of the ASP.NET controls, I used the jQuery attribute selectors which is a better and simple straight way.
[name$="value"]
Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.
[name*="value"]
Selects elements that have the specified attribute with a value containing a given substring.
So $('[id$=checkAllExts]') returns me the parent checkbox only on which I select/deselect all checkboxes.
And $('[id$=cbExtList_]') returns me all the checkbox except the parent checkbox and I perform my actions accordingly.
Old Answer
The Solution of checking and unchecking CheckBoxList with JavaScript on client side.
JavaScript way to do it.
<scripttype="text/javascript">varCounter;
functionExtAll(CheckBox)
{
//Get target base & child control.varTargetBaseControl = document.getElementById('<%= this.leftCB.ClientID %>');
varTargetChildControl = "cbExtList";
//Get all the control of the type INPUT in the base control.varInputs = TargetBaseControl.getElementsByTagName("input");
//Checked/Unchecked all the checkBoxes.for (var n = 0; n < Inputs.length; ++n) {
if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl, 0) >= 0)
Inputs[n].checked = CheckBox.checked;
//Reset Counter
}
Counter = CheckBox.checked ? TotalChkBx : 0;
}
functionChildClick(CheckBox, HCheckBox)
{
//get target base & child control.varHeaderCheckBox = document.getElementById(HCheckBox);
//Modifiy Counter; if(CheckBox.checked && Counter < TotalChkBx)
Counter++;
elseif(Counter > 0)
Counter--;
//Change state of the header CheckBox.if(Counter < TotalChkBx)
HeaderCheckBox.checked = false;
elseif(Counter == TotalChkBx)
HeaderCheckBox.checked = true;
}
</script>I added a checkbox before my checkboxlist to use its reference to select/unselect the checkboxlist.
On that checkbox I'm calling the JavaScript function when onclick event happens.
<divid="leftCB"class="lbl"style="padding-left: 0px;"runat="server"><asp:CheckBoxrunat="server"ID="checkAllExts"Text="All"onclick="javascript:ExtAll(this);" /><asp:CheckBoxListrunat="server"ID="cbExtList" /></div>Code Behind
private Extensions _extension = new Extensions();
private ExtCollection _extCollection = new ExtCollection();
_extCollection = _extension.GetAll();
Dictionary<int, string> dExtensions = new Dictionary<int, string>();
foreach (Extensions ext in _extCollection)
{
dExtensions.Add(ext.ID, ext.Extension);
// Added the below line for the functionality of CheckBoxList// which adds an attribute with all of the checkboxes in the CheckBoxListthis.cbExtList.Attributes["onclick"] = string.Format("javascript:ChildClick(this,'{0}');", this.checkAllExts.ClientID);
}
this.cbExtList.DataSource = dExtensions;
this.cbExtList.DataTextField = "Value";
this.cbExtList.DataValueField = "Key";
this.cbExtList.DataBind();
Solution 2:
If you need to check all checkboxes on checking of an "all" checkbox and uncheck them all upon unchecking of it, but also needed to disable each checkbox (aside from the "all") checkbox when the "all" checkbox was checked, this code should work for you. It has the added benefit of not requiring JavaScript/jQuery, too.
Here's the .aspx code (for this scenario I have nine facilities that can be selected in any combination):
<asp:LabelID="lblFacility"AssociatedControlID="chkFacility"runat="server"Text="Facility: "></asp:Label><asp:CheckBoxListID="chkFacility"runat="server"OnSelectedIndexChanged="chkFacility_SelectedIndexChanged"><asp:ListItemValue="All"Text="All"></asp:ListItem><asp:ListItemValue="Location1"Text="Location 1"></asp:ListItem><asp:ListItemValue="Location2"Text="Location 2"></asp:ListItem><asp:ListItemValue="Location3"Text="Location 3"></asp:ListItem><asp:ListItemValue="Location4"Text="Location 4"></asp:ListItem><asp:ListItemValue="Location5"Text="Location 5"></asp:ListItem><asp:ListItemValue="Location6"Text="Location 6"></asp:ListItem><asp:ListItemValue="Location7"Text="Location 7"></asp:ListItem><asp:ListItemValue="Location8"Text="Location 8"></asp:ListItem><asp:ListItemValue="Location9"Text="Location 9"></asp:ListItem></asp:CheckBoxList>And the Code Behind:
protectedvoidchkFacility_SelectedIndexChanged(object sender, EventArgs e) {
//disables all the checkboxes when "All" is selectedif (chkFacility.SelectedIndex==0) {
foreach(ListItem aListItem in chkFacility.Items) {
aListItem.Selected = true;
if (aListItem.Value != "All") {
aListItem.Enabled = false;
}
}
} elseif (chkFacility.SelectedIndex > 0) {
var i = 0;
foreach(ListItem aListItem in chkFacility.Items) {
if (aListItem.Selected) {
i++;
}
}
//with the i++ check above, this handles unchecking every checkbox when each location is selected and the "All" checkbox is uncheckedif (i == 9) {
foreach(ListItem aListItem in chkFacility.Items) {
aListItem.Selected = false;
aListItem.Enabled = true;
}
//disables the "All" checkbox in all other cases where 8 or fewer of the 9 locations are selected
} else {
foreach(ListItem aListItem in chkFacility.Items) {
if (aListItem.Value == "All") {
aListItem.Enabled = false;
}
}
}
//if no locations are selected after PostBack, make sure all checkboxes are enabled
} elseif (chkFacility.SelectedIndex == -1) {
foreach(ListItem aListItem in chkFacility.Items) {
aListItem.Enabled = true;
}
}
}
One caveat to this implementation, though, is that the code for whether all locations are selected will also clear out the selection if they're all currently selected by manually checking each one. When I was writing the code for work, this edge case was an acceptable risk considering it was unlikely and considering that if all locations need to be selected, the user should be checking the "All" checkbox instead, anyway.
Solution 3:
I have put together an example using jQuery and Javascript to check/uncheck items in a checkboxlist based on the checked state of the first or All check box.
ASPX:
<htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><scriptsrc="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js"type="text/javascript"></script><scripttype="text/javascript">var checkedState = false;
functioncheckAll() {
$("input[id^=cblMultiple]").each(function () {
if ($(this).val() == 0) {
checkedState = $(this).is(":checked")
}
else {
$(this).attr("checked", checkedState)
}
//console.log(checkedState);//console.log($(this).val());
});
}
$(document).ready(function () {
$("input[id^=cblMultiple]").each(function () {
if ($(this).val() == 0) {
$(this).on("click", checkAll);
}
});
});
</script></head><body><formid="form1"runat="server"><asp:CheckBoxListrunat="server"ID="cblMultiple"/></form></body></html>Code Behind
protectedvoidPage_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
cblMultiple.Items.Add(new ListItem("All", "0"));
for (int i = 1; i < 11; i++)
{
cblMultiple.Items.Add(new ListItem("All" + i, i.ToString()));
}
}
}
Solution 4:
loop through the list and set the Selected value of the items to true/false:
for (int i = 0; i < cbExtList.Items.Count; i++)
{
cbExtList.Items[i].Selected = true;
}
Post a Comment for "Check Uncheck All Checkboxes On The Basis Of Another Checkbox"