話不多說，先展示效果圖，如果看官覺得合適，接下來還有源碼和實現詳解等着您
一、效果圖
二、實現詳解
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>角色添加</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../css/public.css" media="all" />
</head>
<body class="childrenBody">
<form class="layui-form" style="width:80%;">
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">角色名稱:</label>
<div class="layui-input-block">
<input type="text" class="layui-input rolename" lay-verify="required" placeholder="請輸入角色名稱">
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">角色描述:</label>
<div class="layui-input-block">
<input type="text" class="layui-input description" lay-verify="number" placeholder="請輸入角色描述">
</div>
</div>
<!-- 權限配置部分-->
<div class="layui-form-item layui-row ">
<div class="layui-col-xs12"><label class="layui-form-label">權限配置</label></div>
<div class="layui-col-xs12">
<table class="layui-table">
<tr>
<th class="layui-bg-gray"><input type="checkbox" name="check_all" title="首頁權限" lay-skin="primary" lay-filter="check_all"/></th>
<td>
<div class="layui-row">
<div class="layui-col-xs3 ">
<input type="checkbox" class="authority" name="authority" title="首頁新增" lay-skin="primary" lay-filter="authority"/>
</div>
<div class="layui-col-xs3 ">
<input type="checkbox" class="authority" name="authority" title="首頁編輯" lay-skin="primary" lay-filter="authority"/>
</div>
<div class="layui-col-xs3 ">
<input type="checkbox" class="authority" name="authority" title="首頁查看" lay-skin="primary" lay-filter="authority" />
</div>
<div class="layui-col-xs3 ">
<input type="checkbox" class="authority" name="authority" title="首頁刪除" lay-skin="primary" lay-filter="authority"/>
</div>
</div>
</td>
</tr>
<tr>
<th class="layui-bg-gray"><input type="checkbox" name="check_all" title="資產管理" lay-skin="primary" lay-filter="check_all"/></th>
<td>
<div class="layui-row">
<div class="layui-col-xs3 ">
<input type="checkbox" class="authority" name="authority" title="資產查看" lay-skin="primary" lay-filter="authority"/>
</div>
<div class="layui-col-xs3 ">
<input type="checkbox" class="authority" title="資產編輯" lay-skin="primary" lay-filter="authority" />
</div>
<div class="layui-col-xs3 ">
<input type="checkbox" class="authority" title="資產查看" lay-skin="primary" lay-filter="authority" />
</div>
<div class="layui-col-xs3 ">
<input type="checkbox" class="authority" title="資產刪除" lay-skin="primary" lay-filter="authority"/>
</div>
<div class="layui-col-xs3 ">
<input type="checkbox" class="authority" title="分組查看" lay-skin="primary" lay-filter="authority"/>
</div>
<div class="layui-col-xs3 ">
<input type="checkbox" class="authority" title="分組編輯" lay-skin="primary" lay-filter="authority"/>
</div>
<div class="layui-col-xs3 ">
<input type="checkbox" class="authority" title="分組查看" lay-skin="primary" lay-filter="authority" />
</div>
<div class="layui-col-xs3 ">
<input type="checkbox" class="authority" title="分組刪除" lay-skin="primary" lay-filter="authority"/>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<!-- 表單提交部分-->
<div class="layui-form-item layui-row layui-col-xs12">
<div class="layui-input-block">
<button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="addUser">立即添加</button>
<button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">取消</button>
</div>
</div>
</form>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/user/roleAdd.js"></script>
<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
<script >
</script>
</body>
</html>
roleAdd.js
layui.use(['form','layer'],function(){
var form = layui.form
layer = parent.layer === undefined ? layui.layer : top.layer,
$ = layui.$;
form.render();
// 實現 全選 反選
form.on('checkbox(check_all)',function(data){
$(this).parent().siblings("td").find("input").prop("checked",this.checked);
form.render('checkbox');
});
/**
* 以下代碼實現:
* 1 當子項全部選中時,全選被選中
* 2 當子項未全部選中時,全選不選中
*/
form.on('checkbox(authority)',function(data){
if(this.checked){//當子項全部選中時,全選被選中
if($(this).parent().siblings("div").children().filter(".authority").not("input:checked").length === 0){
$(this).parent().parent().parent().siblings("th").children('input').prop("checked",true);
form.render('checkbox');
}
} else { // 子項未選中 全選不選中
$(this).parent().parent().parent().siblings("th").children('input').prop("checked",false);
form.render('checkbox');
}
})
})
三、方法詳解
全選\反選實現：
點擊“首頁權限”、“資產權限”實現當前row所有checkbox全選或反選
子項單個選中 全選不選中：
子項全選，全選選中
