jquery 复选框 全选和全不选

问题描述

问 题

最近开始做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如何实现顶层选择(取消)下级所有选择框全选或全不选?

解决方案

符合要求記得給個好評喔

$(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;
              }
          });
       });
    });

这篇关于jquery 复选框 全选和全不选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！