Select all checkboxes without classes

Question

I need to select all checkboxes when checking ".selectall" but after trying a bunch of different ways of arranging the selectors, I still can't get it to work. I guess I'm not sure how to arrange the selectors to say this -> label -> input. Any ideas? Thank you.

$(document).ready(function() {
  $('#selecctall').click(function(event) { //on click 
    if (this.checked) { // check select status
      $('.iw_notify_heirarchical_list li').each(function() { //loop through each checkbox
        $('input', this).checked = true; //select all checkboxes with class "checkbox1"   
      });
    }
  });
});

<ul class="iw_notify_heirarchical_list">
  <label>
    <input type="checkbox" id="selectall">All</label>

  <li id="notifications-164">
    <label class="selectit">
      <input value="164" type="checkbox" name="tax_input[notifications][]" id="in-notifications-164" checked="checked">Calendar Events</label>
    <ul class="children">

      <li id="notifications-173" class="popular-category">
        <label class="selectit">
          <input value="173" type="checkbox" name="tax_input[notifications][]" id="in-notifications-173">Boards and Committees</label>
      </li>

      <li id="notifications-169" class="popular-category">
        <label class="selectit">
          <input value="169" type="checkbox" name="tax_input[notifications][]" id="in-notifications-169">City Council</label>
      </li>

      <li id="notifications-171" class="popular-category">
        <label class="selectit">
          <input value="171" type="checkbox" name="tax_input[notifications][]" id="in-notifications-171" checked="checked">City Events</label>
      </li>

      <li id="notifications-172">
        <label class="selectit">
          <input value="172" type="checkbox" name="tax_input[notifications][]" id="in-notifications-172">Community Events</label>
      </li>

      <li id="notifications-170" class="popular-category">
        <label class="selectit">
          <input value="170" type="checkbox" name="tax_input[notifications][]" id="in-notifications-170">Departments</label>
        <ul class="children">

          <li id="notifications-174">
            <label class="selectit">
              <input value="174" type="checkbox" name="tax_input[notifications][]" id="in-notifications-174" checked="checked">Executive</label>
          </li>

          <li id="notifications-175">
            <label class="selectit">
              <input value="175" type="checkbox" name="tax_input[notifications][]" id="in-notifications-175">Finance</label>
          </li>

          <li id="notifications-176">
            <label class="selectit">
              <input value="176" type="checkbox" name="tax_input[notifications][]" id="in-notifications-176">Fire</label>
          </li>
        </ul>
      </li>
    </ul>
  </li>

  <li id="notifications-165">
    <label class="selectit">
      <input value="165" type="checkbox" name="tax_input[notifications][]" id="in-notifications-165">Employment Opportunities</label>
  </li>

  <li id="notifications-163" class="popular-category">
    <label class="selectit">
      <input value="163" type="checkbox" name="tax_input[notifications][]" id="in-notifications-163" checked="checked">News</label>
  </li>

  <li id="notifications-168">
    <label class="selectit">
      <input value="168" type="checkbox" name="tax_input[notifications][]" id="in-notifications-168">None</label>
  </li>

  <li id="notifications-166">
    <label class="selectit">
      <input value="166" type="checkbox" name="tax_input[notifications][]" id="in-notifications-166">Weekly Calendar Events</label>
  </li>
</ul>

I think this will resolve your problem! http://stackoverflow.com/questions/386281/how-to-implement-select-all-check-box-in-html — Ilija Lončarević, Apr 11 '16 at 21:24

Barmar · Accepted Answer · 2016-04-11T21:44:30.770

0

You're not using the correct jQuery syntax to check a checkbox.

$('input', this).checked = true;

should be

$('input', this).prop('checked', true);

checked is a DOM element property, not a jQuery property.

You also don't need .each, because jQuery methods can be called on a collection and they'll update all the selected elements. So you can simply write:

$('.iw_notify_heirarchical_list li :checkbox').prop('checked', true);

edited Apr 11 '16 at 21:44

answered Apr 11 '16 at 21:30

Barmar

741,623
53
500
612

Thanks @Barmar. I fixed that, but it still does not work. – Apr 11 '16 at 21:39
You have a typo: `#selecctall` should be `#selectall`. – Barmar Apr 11 '16 at 21:45

Select all checkboxes without classes

1 Answers1