下面直接给你最实用、最常见的创建带复选框的树形菜单（Checkbox Tree）方法，jQuery EasyUI 的 tree 组件内置支持复选框，复制粘贴就能做出权限分配、部门多选、商品分类批量选择等场景，领导最爱的“勾选父节点自动勾选子节点、级联选择”效果全都有！
方法1：最简单最常用 – 基本带复选框的树形菜单（推荐现在就用这个，3秒出效果）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI 带复选框的树形菜单</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin:30px;">
<div style="margin-bottom:15px;">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="getChecked()">获取勾选节点</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="reloadTree()">刷新树</a>
<a href="javascript:void(0)" class="easyui-linkbutton c3" iconCls="icon-sum" onclick="checkAll()">全选</a>
<a href="javascript:void(0)" class="easyui-linkbutton c8" iconCls="icon-cancel" onclick="uncheckAll()">全不选</a>
</div>
<!-- 关键：checkbox:true 开启复选框 -->
<ul id="checkTree" class="easyui-tree" data-options="
url:'get_menu_data.php', <!-- 可以是静态标记或异步加载 -->
method:'get',
animate:true,
lines:true,
checkbox:true, <!-- 开启所有节点复选框 -->
cascadeCheck:true, <!-- 级联选择（父选子自动选） -->
onlyLeafCheck:false <!-- false=所有节点都有复选框，true=只有叶子节点有 -->
">
<!-- 如果不想异步，可以直接用标记写静态树 -->
<!--
<li>
<span>系统管理</span>
<ul>
<li><span>用户管理</span></li>
<li><span>角色管理</span></li>
<li><span>部门管理</span></li>
</ul>
</li>
<li><span>商品管理</span></li>
-->
</ul>
</div>
<script>
// 获取所有勾选的节点（包括半选的父节点）
function getChecked(){
var nodes = $('#checkTree').tree('getChecked'); // 完全勾选的节点
var indeterminate = $('#checkTree').tree('getChecked', 'indeterminate'); // 半选节点（子节点部分勾选）
var allChecked = nodes.concat(indeterminate);
var texts = [];
var ids = [];
$.each(allChecked, function(i, node){
texts.push(node.text);
if(node.id) ids.push(node.id);
});
$.messager.alert('勾选的节点',
'<b>节点文本：</b>' + texts.join(', ') +
'<br><br><b>节点ID：</b>' + ids.join(', '),
'info');
}
// 全选所有节点
function checkAll(){
var roots = $('#checkTree').tree('getRoots');
$.each(roots, function(i, root){
$('#checkTree').tree('check', root.target);
});
}
// 全不选
function uncheckAll(){
var roots = $('#checkTree').tree('getRoots');
$.each(roots, function(i, root){
$('#checkTree').tree('uncheck', root.target);
});
}
// 刷新树
function reloadTree(){
$('#checkTree').tree('reload');
}
// 监听勾选事件（可选）
$('#checkTree').tree({
onCheck: function(node, checked){
console.log('节点 ' + node.text + (checked ? ' 被勾选' : ' 被取消勾选'));
},
onLoadSuccess: function(node, data){
// 可以在这里根据权限回显已勾选的节点
// $('#checkTree').tree('check', $('#checkTree').tree('find', 11).target);
}
});
</script>
</body>
</html>效果亮点：
- 所有节点左边都有复选框
- 勾选父节点 → 子节点自动全选（cascadeCheck:true）
- 勾选所有子节点 → 父节点自动半选（灰色勾）
- 支持异步加载（url方式）
getChecked()返回完全勾选节点，getChecked('indeterminate')返回半选节点
方法2：只有叶子节点带复选框（经典权限分配场景）
data-options="
checkbox:true,
onlyLeafCheck:true, <!-- 关键：只有叶子节点显示复选框 -->
cascadeCheck:true
"方法3：关闭级联选择（独立勾选，不影响父子）
cascadeCheck:false <!-- 父节点和子节点互不影响 -->方法4：动态设置节点勾选状态（权限回显超级常用）
// 勾选指定节点（根据id）
var node = $('#checkTree').tree('find', 11);
if(node){
$('#checkTree').tree('check', node.target);
}
// 取消勾选
$('#checkTree').tree('uncheck', node.target);
// 半选状态（一般不用手动设，级联自动处理）
$('#checkTree').tree('check', node.target); // 父节点子节点部分选时自动半选方法5：结合对话框使用（权限分配弹窗）
<div id="permDlg" class="easyui-dialog" title="分配权限" style="width:400px;height:500px;"
data-options="modal:true,closed:true,buttons:[{
text:'保存',iconCls:'icon-save',handler:function(){
var checked = $('#checkTree').tree('getChecked');
var permIds = [];
$.each(checked, function(i,n){ permIds.push(n.id); });
// ajax提交 permIds 到服务器
alert('保存权限ID：' + permIds.join(','));
$('#permDlg').dialog('close');
}
},{
text:'取消',handler:function(){$('#permDlg').dialog('close');}
}]">
<ul id="checkTree" class="easyui-tree" data-options="url:'get_all_menu.php',checkbox:true,onlyLeafCheck:true,cascadeCheck:true,lines:true"></ul>
</div>
<!-- 打开权限分配窗口 -->
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#permDlg').dialog('open')">分配权限</a>你现在直接复制方法1的完整代码运行，就能看到一个超级专业的带复选框树形菜单了！
特别适合：角色权限分配、多选部门、批量选择分类等场景。
想要我给你一个完整的权限分配示例（异步加载菜单树 + 回显已分配权限 + 保存到服务器）？
或者你告诉我你的具体需求（比如“只有叶子节点复选框”“不级联”“带搜索过滤”），我2分钟发你精准代码，复制就能跑！
快说说你想怎么用，我手把手帮你搞定，5分钟内看到完美带复选框的树形菜单！
