javascript - multiSelect和全选JavaScript中的问题

我正在尝试选择多选表格中的所有项目。

我的表单运行正常，但是如果我在选择所有项目后取消选择任何项目，则即使单击“全选”也不会再次选择它。但是我可以单独选择它。

下面是我的代码：

$('.selectall').click(function() {
  if ($(this).is(':checked')) {
    $('.select-all').attr('checked', true);
    $('.select-all').closest(".bold").find('input').attr('checked', true);
  } else {
    $('.select-all').attr('checked', false);
    $('.select-all').closest(".bold").find('input').attr('checked', false);
  }
});
$('.select-all').click(function() {
  if ($(this).is(':checked')) {
    $(this).closest(".bold").find('input').attr('checked', true);
  } else {
    $(this).closest(".bold").find('input').attr('checked', false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="needs-validation" novalidate>
  <ul class="Items-Select">
    <li class="search-items">
      <div class="input-group">
        <span class="input-group-addon">
          <i class="fa fa-search text-info" style="font-size:24px"></i>
        </span>
        <input type="search" class="form-control" placeholder="Search" onkeyup="mySearch()"  id="Search">
        <span class="input-group-btn">
          <button class="btn btn-default" type="reset">
            <i class="fa fa-times-circle-o text-danger" style="font-size:24px"></i>
          </button>
        </span>
      </div>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="selectall">&nbsp;Select all
      </label>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="select-all">&nbsp;Group 1
      </label>
      <span class="caret-container"><b class="caret"></b></span>
      <ul class="group" id="groupa">
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="1-1"> Option 1.1
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="1-2"> Option 1.2
          </label>
       </li>
       <li class="dropdown-item">
         <label class="checkbox">
           <input type="checkbox" value="1-3"> Option 1.3
         </label>
       </li>
     </ul>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="select-all">&nbsp;Group 2
      </label>
      <span class="caret-container"><b class="caret"></b></span>
      <ul class="group" id="groupb">
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-1"> Option 2.1
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-2"> Option 2.2
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-3"> Option 2.3
          </label>
        </li>
      </ul>
    </li>
  </ul>
</form>

当我直接使用“全选”时，该功能目前仅工作一次，但是不幸的是，当我对所有将不会被“全选”或“组选择”选择的对象执行取消选择时，此操作将无效。

最佳答案

只需使用：

$('.selectall').click(function() {
  $('input:checkbox').not(this).prop('checked', this.checked);
});

$('.select-all').click(function() {
  $(this).closest(".bold").find('input').prop('checked', this.checked);
});

$('.group').find('input:checkbox').click(function(){
  if(!$(this).is(':checked')){
    $(this).parents('.group').parent('.bold').find('input.select-all').prop('checked', false);
    $('input.selectall').prop('checked', false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="needs-validation" novalidate>
  <ul class="Items-Select">
    <li class="search-items">
      <div class="input-group">
        <span class="input-group-addon">
          <i class="fa fa-search text-info" style="font-size:24px"></i>
        </span>
        <input type="search" class="form-control" placeholder="Search" onkeyup="mySearch()" id="Search">
        <span class="input-group-btn">
          <button class="btn btn-default" type="reset">
            <i class="fa fa-times-circle-o text-danger" style="font-size:24px"></i>
          </button>
        </span>
      </div>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="selectall">&nbsp;Select all
      </label>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="select-all">&nbsp;Group 1
      </label>
      <span class="caret-container"><b class="caret"></b></span>
      <ul class="group" id="groupa">
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="1-1"> Option 1.1
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="1-2"> Option 1.2
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
           <input type="checkbox" value="1-3"> Option 1.3
         </label>
        </li>
      </ul>
    </li>
    <li class="bold">
      <label class="checkbox">
        <input type="checkbox" class="select-all">&nbsp;Group 2
      </label>
      <span class="caret-container"><b class="caret"></b></span>
      <ul class="group" id="groupb">
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-1"> Option 2.1
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-2"> Option 2.2
          </label>
        </li>
        <li class="dropdown-item">
          <label class="checkbox">
            <input type="checkbox" value="2-3"> Option 2.3
          </label>
        </li>
      </ul>
    </li>
  </ul>
</form>

关于javascript - multiSelect和全选JavaScript中的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60034803/