When you write a program to toggle all checkboxes, is there a way to not include other checkboxes outside of that group?

Question

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

Duplicate of [Wildcards in jQuery selectors](https://stackoverflow.com/questions/5376431/wildcards-in-jquery-selectors) — esqew, Mar 12 '22 at 20:36
Of course there is, yes. But how do you want to identify the elements that *should* be affected? By their `name`, by a common class-name, by a custom `data-*` attribute? Where should that come from? Or do you plan to exclude elements based on information (such as that, above)? — David Thomas, Mar 12 '22 at 22:25

score 0 · Answer 1 · answered Mar 12 '22 at 21:26

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.

Wow. I had no idea a field set would do that. Thank you so much for your knowledge. — Greg, Mar 14 '22 at 16:19
If this helped solve the issue, please mark this answer as the accepted answer. — phentnil, Mar 14 '22 at 22:56

Danston · Answer 2 · 2022-03-13T14:04:10.457

-1

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

edited Mar 13 '22 at 14:04

answered Mar 12 '22 at 20:38

Danston

1
2

This is not an answer, it should (at best) be written as a comment to the question; yes, I know you don't have the "comment everywhere," privilege yet, but that doesn't mean that comments are acceptable in the answer-space of a question. Please: wait until you've earned 50 points of reputation before trying to comment. Also, I do remember how frustrating it is to have to wait for others to ask for detail while unable to do so myself. – David Thomas Mar 12 '22 at 20:40
Thanks for your suggestion. I actually finally got it to work with classes. Each checkbox Item 1 to 3 I added class="group". Then I added $('.group:checkbox') and it seems to work. Unless someone has a better idea. But thanks for the tip. – Greg Mar 12 '22 at 21:13
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 13 '22 at 06:42

When you write a program to toggle all checkboxes, is there a way to not include other checkboxes outside of that group?

2 Answers2