JQuery | CheckBox 复选框数据源回填显示操作

躺平程序员老修

发布于 2023-09-05 15:50:37

25710

代码可运行

文章被收录于专栏：躺平程序员老修

运行总次数：0

代码可运行

前端 jquery

checkbox数据回填问题：

假设前端代码

<div class="col-md-10" id="update-group-right">
    <label><input name="groupRight[]" type="checkbox" value="64" />权限一</label>
    <label><input name="groupRight[]" type="checkbox" value="512" />权限二</label>
    <label><input name="groupRight[]" type="checkbox" value="32768" />权限三</label>
    <label><input name="groupRight[]" type="checkbox" value="32" />权限四</label>
    <label><input name="groupRight[]" type="checkbox" value="256" />权限五</label>
    <label><input name="groupRight[]" type="checkbox" value="8192" />权限六</label>
 </div>

当修改的时候把当前保存的数据取出并显示在对应条目

这里使用Ajax方式已经从数据库取出数据，假设为一个value值的数组groupRight，于是使用如下jquery进行回填：

// 先清空，初始化
$("#update-group-right").find("input").prop("checked", false); // groupRight数据为val值的数组 

$.each(groupRight, function(key, val){

    $("#update-group-right").find("input[value="+val+"]").prop("checked", true); });

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

jquery