Seleccione deseleccionar todas las CheckBoxes sobre la base de otra CheckBox en ASP.NET CheckBoxList

Quiero seleccionar y deseleccionar todas las casillas de verificación cuando el usuario click la primera checkbox (Todos) . Y si el usuario desmarca cualquier checkbox, solo esa checkbox y la primera checkbox (Todos) deben desmarcarse y no debe cambiar las casillas de verificación restantes.

Tengo una list de Checkboxlist de Checkboxlist en mi página que estoy rellenando dinámicamente.

 <asp:CheckBoxList runat="server" ID="cbExtList" /> 

Código detrás

 private Extensions _extension = new Extensions(); private ExtCollection _extCollection = new ExtCollection(); _extCollection = _extension.GetAll(); Dictionary<int, string> dExtensions = new Dictionary<int, string>(); dExtensions.Add(0, "All"); foreach (Extensions ext in _extCollection) { dExtensions.Add(ext.ID, ext.Extension); } this.cbExtList.DataSource = dExtensions; this.cbExtList.DataTextField = "Value"; this.cbExtList.DataValueField = "Key"; this.cbExtList.DataBind(); 

enter image description here

Ahora todo está funcionando bien. Solo quiero seleccionar todas las extensiones cuando hago clic en la primera checkbox "Todas" en esta list de Checkboxlist .

Esto es lo que probé con el código detrás de enfoque.

Con OnSelectedIndexChanged y configurando AutoPostBack = True

 <asp:CheckBoxList runat="server" ID="cbExtList" OnSelectedIndexChanged="cbExtList_OnSelectedIndexChanged" AutoPostBack="True" /> protected void cbExtList_OnSelectedIndexChanged(object sender, EventArgs e) { try { if (Convert.ToInt32(this.cbExtList.SelectedItem.Value) == 0) { foreach (ListItem li in cbExtList.Items) { li.Selected = true; } } else { foreach (ListItem li in cbExtList.Items) { li.Selected = false; } } } catch (Exception ex) { Monitoring.WriteException(ex); } } 

Editado

JQuery manera de hacerlo.

Este es el único código de JQuery que necesito para lograr la funcionalidad dada.

 $(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); } }); }); 

Para get Ids de los controles ASP.NET , utilicé los selectores de attributes JQuery , que es una forma directa mejor y más simple.

[nombre $ = "valor"]

Selecciona los elementos que tienen el atributo especificado con un valor que termina exactamente con una cadena dada. La comparación es sensible a mayúsculas y minúsculas

[nombre * = "valor"]

Selecciona los elementos que tienen el atributo especificado con un valor que contiene una subcadena dada.

Entonces $('[id$=checkAllExts]') me devuelve la casilla principal solo en la que selecciono / deselecciono todas las casillas de verificación.

Y $('[id$=cbExtList_]') me devuelve toda la checkbox excepto la casilla principal y realizo mis acciones en consecuencia.

Vieja respuesta

La solución de verificar y desmarcar CheckBoxList con JavaScript en el lado del cliente.

Forma JavaScript para hacerlo

 <script type="text/javascript"> var Counter; function ExtAll(CheckBox) { //Get target base & child control. var TargetBaseControl = document.getElementById('<%= this.leftCB.ClientID %>'); var TargetChildControl = "cbExtList"; //Get all the control of the type INPUT in the base control. var Inputs = 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; } function ChildClick(CheckBox, HCheckBox) { //get target base & child control. var HeaderCheckBox = document.getElementById(HCheckBox); //Modifiy Counter; if(CheckBox.checked && Counter < TotalChkBx) Counter++; else if(Counter > 0) Counter--; //Change state of the header CheckBox. if(Counter < TotalChkBx) HeaderCheckBox.checked = false; else if(Counter == TotalChkBx) HeaderCheckBox.checked = true; } </script> 

Agregué una checkbox antes de mi list de checkbox para usar su reference para seleccionar / deseleccionar la list de checkbox. En esa casilla llamo a la function javascript cuando ocurre el evento onclick .

 <div id="leftCB" class="lbl" style="padding-left: 0px;" runat="server"> <asp:CheckBox runat="server" ID="checkAllExts" Text="All" onclick="javascript:ExtAll(this);" /> <asp:CheckBoxList runat="server" ID="cbExtList" /> </div> 

Código detrás

 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 CheckBoxList this.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(); 

He creado un ejemplo usando jQuery y Javascript para marcar / desmarcar elementos en una checkbox basada en el estado verificado de la primera checkbox o de All .

ASPX:

 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> var checkedState = false; function checkAll() { $("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> <form id="form1" runat="server"> <asp:CheckBoxList runat="server" ID="cblMultiple"/> </form> </body> </html> 

Código detrás

 protected void Page_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())); } } } 

recorre la list y establece el valor seleccionado de los elementos en verdadero / falso:

 for (int i = 0; i < cbExtList.Items.Count; i++) { cbExtList.Items[i].Selected = true; }