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的第一个复选框的checked属性。如果选中其他复选框，则可以在document ready上调用相同的函数来设置“全选”复选框的复选属性。请参阅下面的代码段（我已将初始化放入setCheckBoxUpHandlers方法，以允许为某些不同的测试用例传递id / class名称）。

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

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

1 个答案: