When you write a program to toggle all checkboxes, is there a way to not include other checkboxes ou-CodePudding

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 checkboxes

CodePudding user response：

With 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.

CodePudding user response：

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!)