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

<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，但是搜索帮助我实现了上面的代码，该代码可以正常运行，但没有达到预期的效果。

最佳答案

您可以使用:not() selector来查看是否未选中其中一个复选框，然后您可以使用id调整第一个复选框的checked属性。如果选中了其他复选框，则可以在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/>

关于javascript - 检查是否还选中了所有其他复选框；工作，但我想要更多，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44397385/