使用jQuery和AJAX动态勾选复选框的实现问题

嘿，我来帮你解决这个卡壳的步骤！既然你已经完成了ID和权限键的比对，那剩下的就是精准定位复选框并把它勾上，我给你一步步捋清楚：

第一步：给复选框加唯一标识 #

你在循环生成菜单的时候，得给每个子菜单的复选框加个能对应菜单ID的标记，比如data-menu-id属性，这样后续能直接通过ID找到它。比如在你的HTML循环里可以这么改：

<% for(var i=0;i< data.length;i++){ 
    if(data[i].has_child == 1) { %> 
    <div class="panel panel-primary">
        <!-- 父菜单的内容这里省略 -->
        <% for(var j=0;j<data[i].child.length;j++){ %>
            <div class="checkbox">
                <label>
                    <!-- 这里给复选框加上data-menu-id，值就是子菜单的ID -->
                    <input type="checkbox" class="menu-checkbox" data-menu-id="<%= data[i].child[j].id %>">
                    <%= data[i].child[j].name %>
                </label>
            </div>
        <% } %>
    </div>
<% } %>

第二步：AJAX拿到权限后勾选的逻辑 #

当你点击用户名通过AJAX拿到用户的权限列表（比如一个存着有权限的菜单ID的数组userPermissions），接下来就可以遍历这个数组，找到对应的复选框并设置它为选中状态。

原生JS写法（不用框架的话） #

如果项目没用到jQuery，用原生JS就能搞定：

// 封装一个勾选权限的函数
function checkUserMenus(userPermissions) {
    // 拿到所有菜单复选框
    const allCheckboxes = document.querySelectorAll('.menu-checkbox');
    allCheckboxes.forEach(checkbox => {
        // 把data属性里的ID转成数字，避免类型不匹配
        const menuId = parseInt(checkbox.getAttribute('data-menu-id'));
        // 只要当前菜单ID在权限列表里，就勾上
        if (userPermissions.includes(menuId)) {
            checkbox.checked = true;
        }
    });
}

// 给用户名绑定点击事件发起AJAX
document.querySelector('.username').addEventListener('click', function() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/你的权限接口地址', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            // 把返回的JSON转成数组
            const userPermissions = JSON.parse(xhr.responseText);
            // 调用勾选函数
            checkUserMenus(userPermissions);
        }
    };
    xhr.send();
});

jQuery写法（项目用了jQuery更省心） #

如果你的项目已经引入了jQuery，代码会更简洁：

// 点击用户名发起请求
$('.username').click(function() {
    $.get('/你的权限接口地址', function(userPermissions) {
        // 遍历权限ID，找到对应复选框勾上
        userPermissions.forEach(permId => {
            $(`.menu-checkbox[data-menu-id="${permId}"]`).prop('checked', true);
        });
    });
});

几个要注意的小细节 #

• 一定要保证菜单ID和权限返回的ID类型一致！比如都是数字，别一个是字符串"1"一个是数字1，不然比对会失败。
• 如果菜单是异步加载的（比如先加载菜单再拿权限），要等菜单渲染完再执行勾选逻辑，不然找不到DOM元素哦。
• 如果需要父菜单联动（比如子菜单全选时父菜单自动勾选），可以在勾选子菜单后额外加一段逻辑处理父菜单的状态。

内容的提问来源于stack exchange，提问作者Kiran Devkar