bootstraptable+iCheck单选框复选框，动态生成复选框和动态初始化选中

html代码

<form id="addUserRoleForm" class="form-horizontal">
                    <div class="form-group">
                        <label for="uName" class="col-sm-2 control-label" style="padding-right: 0">用户名</label>
                        <div class="col-sm-10">
                            <input class="form-control" name="uNmae" id="uName" placeholder="请输入用户名"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="mobile" class="col-sm-2 control-label" style="padding-right: 0">手机号</label>
                        <div class="col-sm-10">
                            <input class="form-control" name="mobile" id="mobile" placeholder="请输入手机号"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="mobile" class="col-sm-2 control-label" style="padding-right: 0">角色</label>
                        <div class="col-sm-10">
                            <div id="roleCheck" class="form-group"></div>
                        </div>
                    </div>
                    <!--尾部-->
                    <div class="modal-footer">
                        <button id="submitUserOfRole" type="submit" class="btn btn-primary">保存</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </form>

js代码动态设置复选框值

//增加用户同时分配角色
function addUserRole() {
    $("#uName").val("");
    $("#mobile").val("");
    //初始化复选框不选中
    $("input[name='roleCheck']").iCheck('uncheck');
    //打开增加用户同时分配角色模态框
    $("#addUserRoleModal").modal("show");
}


//增加动态复选框值
function checkRole() {
    $.post("/internal/role/selectList", function (data) {
        var types = eval(data);
        for (var i = 0; i < types.length; i++) {
            $("#roleCheck").append("<label style='margin-left: 10px;'><input type='checkbox' class='form-control' name='roleCheck' value=" + types[i].id + " />&nbsp;&nbsp;" + types[i].roleName + "</label>");
        }
        //设置iCheck组件初始化
        $("input[type='checkbox']").iCheck({
            cursor: true,
            handle: 'checkbox',
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
            increaseArea: '20%'
        });
        //设置复选框默认不选中
        $("input[name='roleCheck']").iCheck('uncheck');
    });
}

js代码设置复选框动态选中

//修改用户角色  修改授权
function updateUserOfRole(id) {
    $("#userId").val(id);
    //通过uniqueId 获取行数据
    var rows = $('#parameterTab').bootstrapTable('getRowByUniqueId', id);
    $("#updateName").val(rows.name);
    $("#updateMobile").val(rows.mobile);
    //清空复选框值  整个html元素清空  再重新调用方法生成
    $("#updateRoleCheck").html("");
    //加载修改角色复选框
    updateRoleCheck(id);
    //打开分配角色模态框
    $("#sysUserRoleModal").modal('show');
}

//修改用户角色 复选框加载和绑定值
function updateRoleCheck(rowId) {
    //获取行数据 用户
    var userInfo = $('#parameterTab').bootstrapTable('getRowByUniqueId', rowId);
    var userInfoRoleIds = [];
    for (var item of userInfo.roleIds) {
        userInfoRoleIds.push(item.id);
    }
    $.post("/internal/role/selectList", function (data) {
        var roleList = eval(data);
        var seleted = false;
        for (var i in roleList) {
            for (var j in userInfoRoleIds) {
                if (roleList[i].id == userInfoRoleIds[j]) {
                    seleted = true;
                    break;
                }
            }
            if (seleted) {
                var str = "<label style='margin-left: 10px;'>" +
                    "<input type='checkbox' checked='checked' name='updateRoleCheck' value='" + roleList[i].id + "' />&nbsp;&nbsp;";
            } else {
                var str = "<label style='margin-left: 10px;'>" +
                    "<input type='checkbox' name='updateRoleCheck' value='" + roleList[i].id + "' />&nbsp;&nbsp;";
            }
            str += roleList[i].roleName + " </label>";

            $("#updateRoleCheck").append(str);
            seleted = false;
        }
        //设置Icheck框架
        $("#updateRoleCheck").iCheck({
            cursor: true,
            handle: 'checkbox',
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
            increaseArea: '20%'
        });
    });
}

html代码

<div class="modal-body">
                <!-- 表单-->
                <form id="updateUserRoleForm" class="form-horizontal">
                    <div class="form-group">
                        <label for="uName" class="col-sm-2 control-label" style="padding-right: 0">用户名</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" readonly="readonly" id="updateName" placeholder="请输入用户名"/>
                            <input hidden="hidden" id="userId" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="mobile" class="col-sm-2 control-label" style="padding-right: 0">手机号</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" readonly="readonly" id="updateMobile" placeholder="请输入手机号"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="mobile" class="col-sm-2 control-label" style="padding-right: 0">角色</label>
                        <div class="col-sm-10">
                            <div id="updateRoleCheck" class="form-group"></div>
                        </div>
                    </div>

                </form>
            </div>
            <!--尾部-->
            <div class="modal-footer">
                <button id="submitUser" type="button" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>