jquery根据后台返回值设置checkbox选中

最新推荐文章于 2022-01-18 14:53:38 发布

linlinxie

最新推荐文章于 2022-01-18 14:53:38 发布

阅读量1w

点赞数 2

文章标签： jquery checkbox

本文链接：https://blog.youkuaiyun.com/linlinxie/article/details/78124691

版权

本文介绍了一种利用jQuery简化操作的方法，实现根据后台返回的角色ID数据动态选中对应的复选框。通过遍历JSON对象并匹配value属性来实现这一目标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据后台返回的值选中checkbox，使用jquery代码很简单，这里记一下以后方便查阅
返回user的json对象如下

user:{
id:10
name:test
roles:[
{id:1,name:管理员},
{id:2,name:普通用户}
]
}

页面html

<div class="col-sm-10">
    <label class="checkbox-inline">
    <input type="checkbox" name="role" value="1"> 管理员
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" name="role" value="2"> 普通用户
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" name="role" value="3"> 人力
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" name="role" value="4"> 记者
    </label>
</div>

jquery

var roles = returnData.roles;
    if(roles != null) {
        $.each(roles, function(key, value) {
            $("input[name='role'][value='"+value.roleId+"']").attr("checked", true);
        });
    }