如何用MySQL存储的JSON权限数据自动设置checkbox勾选状态？

1. 修正下拉菜单代码 #

原下拉菜单的option value全部为0、多个选中属性不符合使用要求，需调整为和数据库roles表中角色ID一一对应，同时把触发事件修改为权限加载函数：

<select onchange="loadRolePriv(this)" id="role_selector" name="roles">
  <option value='0' disabled selected >请选择角色</option>
  <option value='1' >管理员</option>
  <option value='2' >编辑</option>
</select>

2. 新增服务端查询接口 #

新建get_role_priv.php文件，用于接收角色ID、返回对应权限的JSON数据：

<?php
// 此处补上你自己的数据库连接代码（mysqli/PDO连接逻辑）
$role_id = intval($_GET['role_id']); // 转整数防SQL注入
$sql = "SELECT privilege FROM `roles` WHERE `id` = $role_id";
// 执行查询，以下为mysqli示例，可根据你自己的数据库操作逻辑调整
$res = mysqli_query($conn, $sql);
$row = mysqli_fetch_assoc($res);
// 直接输出权限JSON即可
echo empty($row['privilege']) ? '[]' : $row['privilege'];
?>

3. 新增AJAX交互与自动勾选逻辑 #

替换原有JS代码，新增权限拉取、自动勾选的逻辑：

// 保留原有显隐逻辑，调整判断条件适配多角色场景
function showDiv(divId, element){
    document.getElementById(divId).style.display = element.value != 0 ? 'block' :'none';
}

// 新增角色权限加载函数
function loadRolePriv(selectObj) {
    const roleId = selectObj.value;
    showDiv('priv', selectObj);
    if (roleId == 0) return; // 选中默认选项时不加载权限

    // 发送AJAX请求拉取权限
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `get_role_priv.php?role_id=${roleId}`, true);
    xhr.onload = function() {
        if (this.status === 200) {
            const privList = JSON.parse(this.responseText);
            // 先清空所有勾选状态
            document.querySelectorAll('input[name="chk[]"]').forEach(cb => {
                cb.checked = false;
            });
            // 匹配到的权限自动勾选
            privList.forEach(privVal => {
                const targetCb = document.querySelector(`input[name="chk[]"][value="${privVal}"]`);
                if (targetCb) targetCb.checked = true;
            });
        }
    }
    xhr.send();
}

注意事项 #

• 如果只有特定ID的角色需要显示权限区域，可以自行调整showDiv函数里的显示判断条件
• 数据库连接逻辑根据你原有项目的实现方式替换即可，无需完全照搬示例中的mysqli写法
• 若权限存储时可能出现非JSON格式的异常值，可以在JS解析JSON前加异常捕获避免页面报错

内容的提问来源于stack exchange，提问作者karzan Nawzad