Entiendo cómo cambiar el estado de todas las casillas de verificación a marcadas o no marcadas con un solo clic, ya sea mediante una casilla de verificación o un enlace. Esa es la parte fácil.
Pero también tengo varias casillas de verificación que no quiero activar o desactivar con un solo clic, que no forman parte del grupo que debería verse afectado. Estas casillas de verificación deben protegerse.
A continuación se muestra un ejemplo. Puedo hacer clic en la casilla de verificación inferior para alternar, pero solo debería afectar las casillas de verificación del Elemento 1 al Elemento 3. Cuando hago clic en la casilla de verificación inferior, no debería alternar las dos primeras casillas de verificación que deberían estar protegidas.
Gracias...
$(function() { $('#toggle-all').click(function(event) { var selected = this.checked; $(':checkbox').each(function() { this.checked = selected; }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- These next two checkboxes should not be part of the checkboxes to be all toggled on or off --> <input type='checkbox' name='notAssociated1'>This checkbox should be protected from ability to toggle all below<br> <input type='checkbox' name='notAssociated2'>This checkbox should also be protected from ability to toggle all below<br><br> <!-- The checkboxes below should be affected by clicking on the checkbox to toggle all on or off --> <input type="checkbox" name="CB1" id="CB1" />Item 1<br> <input type="checkbox" name="CB2" id="CB2" />Item 2<br> <input type="checkbox" name="CB3" id="CB3" />Item 3<br> <!-- select all boxes --> <br><input type="checkbox" name="toggle-all" id="toggle-all" />Toggle Item 1 thru Item 3 but not the top two checkboxesCon una ligera modificación en su código, puede habilitar la selección de solo las entradas de checkbox de verificación que desee. Hay varias formas de lograr esto, pero elegí rodear las casillas de verificación específicas con un elemento de conjunto de campo (puede usar un elemento div u otro elemento a nivel de bloque si lo desea) y usar fieldset .siblings() para seleccionar solo estas casillas de verificación . Consulte el siguiente fragmento de código como ejemplo.
$(function() { $('#toggle-all').click(function(event) { var selected = this.checked; $(this).siblings(":checkbox").each(function() { this.checked = selected; }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- These next two checkboxes should not be part of the checkboxes to be all toggled on or off --> <fieldset> <input type='checkbox' name='notAssociated1'>This checkbox should be protected from ability to toggle all below<br> <input type='checkbox' name='notAssociated2'>This checkbox should also be protected from ability to toggle all below<br><br> </fieldset> <!-- The checkboxes below should be affected by clicking on the checkbox to toggle all on or off --> <fieldset> <input type="checkbox" name="CB1" id="CB1" />Item 1<br> <input type="checkbox" name="CB2" id="CB2" />Item 2<br> <input type="checkbox" name="CB3" id="CB3" />Item 3<br> <!-- select all boxes --> <br><input type="checkbox" name="toggle-all" id="toggle-all" />Toggle Item 1 thru Item 3 but not the top two checkboxes </fieldset> Si prefiere mantener el diseño original, puede usar otros selectores para orientar los selectores que desee. En su caso, puede seleccionar con $("[id^=CB]") o establecer clases para cada uno de los elementos de la casilla de verificación y seleccionar con $(".selectAllCB") o cualquier nombre de clase que desee.
si está utilizando selectores de jQuery, puede asignar agrupaciones de casillas de verificación a través de id o clase. p.ej. usando:
$('.class-group')...(¡un poco novato en mi mente!)