javascript - 检查是否选中所有其他复选框；工作但我想要更多

Question

<script>$(function(){
  $('#admin_permission_check').on('change',function(){
     $('.admin_permission_check').prop('checked',$(this).prop('checked'));
  });
  $('.admin_permission_check').on('change',function(){
     $('#admin_permission_check').prop('checked',$('.admin_permission_check:checked').length ? true: false);
  });

});</script>
<input type=checkbox id='admin_permission_check' value="1" /> Select All
<input type=checkbox class='admin_permission_check' value="2" />
<input type=checkbox class='admin_permission_check' value="2" />

这工作正常，当检查 ID 为 admin_permission_check 的复选框时，我可以检查类 admin_permission_check 的所有复选框。

但是，当我取消选中任何带有类 admin_permission_check 的复选框时，带有 id admin_permission_check 的复选框不会自动取消选中，如果所有带有类 admin_permission_check 的复选框都已在页面加载时选中，那么我应该做什么，然后带有 id admin_permission_check 的复选框会自动获取已检查。

我不了解 Javascript，但搜索帮助我实现了上面的代码，该代码可以工作，但不符合预期。

Answer 1

您可以使用:not() selector查看其中一个复选框是否未选中，之后您可以使用 id 调整第一个复选框的选中属性。可以在 document ready 上调用相同的函数如果选中其他复选框，则设置“全选”复选框的选中属性。请参阅下面的代码片段(我已将初始化放入 setCheckBoxUpHandlers 方法中，以允许为某些不同的测试用例传递 id/类名称)。

$(document).ready(function(){
  setCheckBoxUpHandlers('admin_permission_check');
  setCheckBoxUpHandlers('admin_permission_check1');
  setCheckBoxUpHandlers('admin_permission_check2');
});


function setCheckBoxUpHandlers(name){
  $('#' + name).on('change',function(){
    $('.' + name).prop('checked', $(this).prop('checked'));
  });

  function checkIfAllAreChecked(){
    $('#'+ name).prop('checked', $('.' + name + ':not(:checked)').length ? false: true);
  }

  checkIfAllAreChecked();

  $('.' + name).on('change',function(){
    checkIfAllAreChecked();
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=checkbox id='admin_permission_check' value="1" /> Select All
<input type=checkbox class='admin_permission_check' value="2" />
<input type=checkbox class='admin_permission_check' value="2" />

<br/>
<span>-------------------------------------------------------------------</span>
<br/>

<input type=checkbox id='admin_permission_check1' value="3" /> Select All
<input type=checkbox class='admin_permission_check1' value="4" />
<input type=checkbox class='admin_permission_check1' value="4" checked/>
<input type=checkbox class='admin_permission_check1' value="4" />

<br/>
<span>-------------------------------------------------------------------</span>
<br/>

<input type=checkbox id='admin_permission_check2' value="5" /> Select All
<input type=checkbox class='admin_permission_check2' value="6" checked/>
<input type=checkbox class='admin_permission_check2' value="6" checked/>