Question

我需要在选中“.selectall”时选中所有复选框，但在尝试了一系列不同的方法来安排选择器之后，我仍然无法让它工作。我想我不知道如何安排选择者这样说 - ＆gt;标签 - ＆gt;输入。有任何想法吗？谢谢。

$(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>

Answer 1

您没有使用正确的jQuery语法来检查复选框。

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

应该是

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

checked是DOM元素属性，而不是jQuery属性。

您也不需要.each，因为可以在集合上调用jQuery方法，它们将更新所有选定的元素。所以你可以简单地写一下：

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

选择没有类的所有复选框

1 个答案: