jquery 复选框 全选和全不选

Question

最近开始做rbac项目,涉及到复选框的全选和全不选操作.
html部分:

<div class="checkbox">
      <label>
      <input type="checkbox" value="1" level="0">RBAC </label>
      <br>                
      <label><input type="checkbox" value="4" level="1">权限管理   </label>
      <br>                
      <label><input type="checkbox" value="5" level="2">权限列表  </label>
      <br>                
      <label><input type="checkbox" value="6" level="2">添加权限  </label>
      <br>                
      <label><input type="checkbox" value="7" level="2">权限编辑</label>
      <br>                
      <label><input type="checkbox" value="8" level="2">删除权限</label>
      <br>                
      <label><input type="checkbox" value="9" level="1">角色管理</label>
      <br>                
      <label><input type="checkbox" value="10" level="2">添加角色</label>
      <br>                
      <label><input type="checkbox" value="11" level="2">角色列表</label>
      <br>                
      <label><input type="checkbox" value="12" level="2">角色删除</label>
      <br>                
      <label><input type="checkbox" value="13" level="2">编辑角色</label>
      <br>                
      <label><input type="checkbox" value="14" level="1">管理员管理 </label>
      <br>                
      <label><input type="checkbox" value="15" level="2">管理员列表</label>
      <br>                
      <label><input type="checkbox" value="16" level="2">添加管理员</label>
      <br>                
      <label><input type="checkbox" value="17" level="2">删除管理员</label>
      <br>                
      <label><input type="checkbox" value="18" level="2">编辑管理员</label>
      <br>                
  </div>

level数值越低,层级越高
用jquery如何实现顶层选择(取消)下级所有选择框全选或全不选?

Answer 1

符合要求記得給個好評喔

$(function(){
       $(".checkbox input[type='checkbox']").click(function(){
          var getlevel = $(this).attr("level");
          var ischecked = $(this).is(":checked");
          var getindex = $(".checkbox input[type='checkbox']").index(this);
 
          $(".checkbox input[type='checkbox']:gt("+getindex+")").each(function () {
              if(parseInt(getlevel) < parseInt($(this).attr("level"))) {
              
                  if(ischecked == true) {
        
                      $(this).prop("checked",true);
                  } else {
                      $(this).prop("checked",false);
                  }                  
              } else {
                  return false;
              }
          });
       });
    });

Answer 2

全选：$('input[type=checkbox]').prop('checked', true);

全不选：$('input[type=checkbox]').prop('checked', false);

Answer 3

这个是我之前写过的，可以支持多组(我这里是按照 ul 分了组)，支持全选全不选，支持子级选框勾选可以勾选父级选框。
父节点就是控制全选的选框，子节点就是子选框，你可以改成你想要的节点来使用。