I understand how to toggle the status of all check-boxes to checked or not-checked by a single click, either by a check-box or a link. That is the easy part.
But I also have several check-boxes that I do not want to toggle on or off by a single click, that are not part of the group that should be affected. These check-boxes need to be protected.
Below is an example. I can click the bottom checkbox to toggle, but it should only affect Item 1 through Item 3 check-boxes. When I click the bottom checkbox, it should not toggle the first two check-boxes that should be protected.
Thanks...
$(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 checkboxesWith a slight modification to your code, you can enable selecting only the checkbox inputs you want. There are multiple ways to achieve this, but I chose to surround the targeted check boxes with a fieldset element (you can use a div element or other block-level element if you wish) and use .siblings() to select only these check boxes. See the following code snippet as an example.
$(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>If you would prefer to keep the original layout, you can use other selectors to target the selectors you want. In your case, you can select with $("[id^=CB]") or setting classes to each of the check box elements and selecting with $(".selectAllCB") or whatever class name you would like.
if you're using jQuery selectors you can just give checkboxes groupings through id, or class. eg. using:
$('.class-group')...
(bit of a noob myself mind!)