选中all in复选框，同时选择all all

Question

我是否可以询问如何在多个全选中同时在复选框中编码“全选”？

$(document).ready(function() {
  $('.allcheckboxes').click(function() {
      $(this).next().parent().parent().parent().toggleClass('checkallbox');

      if($('#selectall_wrapper').hasClass('checkallbox')) {

          $('#selectall_wrapper input[type="checkbox"]').prop('checked', true);

      } else {
          $('#selectall_wrapper input[type="checkbox"]').prop('checked', false);
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="selectall_wrapper">
    <li>
        <div class="form-group">
          <input id="checkedall" class="allcheckboxes" type="checkbox">
          <label for="checkedall">Select all services</label>
        </div>
    </li>

    <li>
        <div class="form-group">
          <input id="checkbox1" type="checkbox">
          <label for="checkbox1">Service 1</label>
        </div>
    </li>

    <li>
        <div class="form-group">
          <input id="checkbox2" type="checkbox">
          <label for="checkbox2">Service 2</label>
        </div>
    </li>

    <li>
        <div class="form-group">
          <input id="checkbox3" type="checkbox">
          <label for="checkbox3">Service 3</label>
        </div>
    </li>
</ul>


<ul id="selectall_wrapper">
    <li>
        <div class="form-group">
          <input id="checkedall" class="allcheckboxes" type="checkbox">
          <label for="checkedall">Select all products</label>
        </div>
    </li>

    <li>
        <div class="form-group">
          <input id="checkbox1" type="checkbox">
          <label for="checkbox1">product 1</label>
        </div>
    </li>

    <li>
        <div class="form-group">
          <input id="checkbox2" type="checkbox">
          <label for="checkbox2">product 2</label>
        </div>
    </li>

    <li>
        <div class="form-group">
          <input id="checkbox3" type="checkbox">
          <label for="checkbox3">product 3</label>
        </div>
    </li>
</ul>

Answer 1

使用您的代码，您可以使用另一个包装器并将其添加到您的函数中。 （这可以清理并大大简化，但你明白了。）

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.allcheckboxes').click(function() {
      $(this).next().parent().parent().parent().toggleClass('checkallbox');

      if($('#selectall_wrapper').hasClass('checkallbox')) {

          $('#selectall_wrapper input[type="checkbox"]').prop('checked', true);

      } else{
          $('#selectall_wrapper input[type="checkbox"]').prop('checked', false);
      }  if($('#selectall_wrapper_2').hasClass('checkallbox')) {

          $('#selectall_wrapper_2 input[type="checkbox"]').prop('checked', true);

      } else {
          $('#selectall_wrapper_2 input[type="checkbox"]').prop('checked', false);
      }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="selectall_wrapper">
    <li>
        <div class="form-group">
          <input id="checkedall" class="allcheckboxes" type="checkbox">
          <label for="checkedall">Select all services</label>
        </div>
    </li>

    <li>
        <div class="form-group">
          <input id="checkbox1" type="checkbox">
          <label for="checkbox1">Service 1</label>
        </div>
    </li>

    <li>
        <div class="form-group">
          <input id="checkbox2" type="checkbox">
          <label for="checkbox2">Service 2</label>
        </div>
    </li>

    <li>
        <div class="form-group">
          <input id="checkbox3" type="checkbox">
          <label for="checkbox3">Service 3</label>
        </div>
    </li>
</ul>


<ul id="selectall_wrapper_2">
    <li>
        <div class="form-group">
          <input id="checkedall_2" class="allcheckboxes" type="checkbox">
          <label for="checkedall_2">Select all products</label>
        </div>
    </li>

    <li>
        <div class="form-group">
          <input id="checkbox1" type="checkbox">
          <label for="checkbox1">product 1</label>
        </div>
    </li>

    <li>
        <div class="form-group">
          <input id="checkbox2" type="checkbox">
          <label for="checkbox2">product 2</label>
        </div>
    </li>

    <li>
        <div class="form-group">
          <input id="checkbox3" type="checkbox">
          <label for="checkbox3">product 3</label>
        </div>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;