如何用jQuery根据数据值动态设置checkbox复选框选中状态

问题根因 #

• 模态框无法弹出：你在JS代码中调用了PHP专属的strstr()函数，JavaScript运行环境不存在这个方法，代码执行到此处会直接抛出ReferenceError，中断后续所有逻辑，导致模态框唤起代码无法执行。
• 原有写法缺陷：硬编码枚举所有权限组合的方式扩展性极差，每增加一种权限组合就要新增一个判断分支，维护成本极高。

实现思路 #

不需要枚举所有权限组合，只需要针对单个权限值做存在性判断即可：

1. 每次加载用户数据前，先重置所有相关复选框为未选中状态，避免上一次打开模态框的选中状态残留
2. 做匹配时增加边界判断，避免短权限名误匹配长权限名（比如存在XABC这类权限时，不会被误判为包含ABC）
3. 逐个判断目标权限是否存在，存在则勾选对应复选框
4. 所有状态设置完成后，再执行表单赋值、模态框唤起逻辑

可直接使用的代码 #

把你AJAX请求success回调里那堆硬编码的if判断全部替换为以下代码即可：

success:function(data){  
    // 重置所有复选框状态
    document.getElementById("check1").checked = false;
    document.getElementById("check2").checked = false;
    document.getElementById("check3").checked = false;

    // 给权限字符串前后拼接逗号，做边界匹配，避免误判
    const accessTagStr = ',' + data.accesslocations + ',';
    // 逐个匹配权限，勾选对应复选框
    if(accessTagStr.indexOf(',ABC,') !== -1){
        document.getElementById("check1").checked = true;
    }
    if(accessTagStr.indexOf(',DEF,') !== -1){
        document.getElementById("check2").checked = true;
    }
    if(accessTagStr.indexOf(',GHI,') !== -1){
        document.getElementById("check3").checked = true;
    }

    // 原有表单赋值、唤起模态框逻辑保持不变
    $('#employee_id_update').val(data.row_id);  
    $('#insert').val("Update");
    $('#new_data_Modal').modal('show'); 
},
error: function(req, status, error) {
    alert(req.responseText);      
}   

注：这里用indexOf做匹配是为了兼容所有浏览器，如果不需要兼容IE，也可以换成更易读的includes方法，写法为accessTagStr.includes(',ABC,')

扩展性更好的写法 #

如果后续权限项会持续增加，可以用配置映射的写法减少重复代码，后续加权限只需要在映射表里加一行配置即可：

success:function(data){  
    // 权限值和对应复选框ID的映射表
    const permissionCheckMap = {
        'ABC': 'check1',
        'DEF': 'check2',
        'GHI': 'check3'
    };

    // 批量重置所有复选框状态
    Object.values(permissionCheckMap).forEach(checkId => {
        document.getElementById(checkId).checked = false;
    });

    // 拆分接口返回的逗号分隔权限字符串为数组
    const userPermissions = data.accesslocations.split(',');
    // 遍历权限列表，自动勾选对应复选框
    userPermissions.forEach(perm => {
        if(permissionCheckMap[perm]){
            document.getElementById(permissionCheckMap[perm]).checked = true;
        }
    });

    // 原有逻辑保持不变
    $('#employee_id_update').val(data.row_id);  
    $('#insert').val("Update");
    $('#new_data_Modal').modal('show'); 
},
error: function(req, status, error) {
    alert(req.responseText);      
}   

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