动态初始化checkBox复选框及修改时赋值

来源：互联网发布：sql查询平均分大于60 编辑：程序博客网时间：2024/05/21 07:05

上次写了动态初始化select下拉框及修改时的赋值，这几天在开发过程中需要为CheckBox复选框进行动态加载并且赋值。最后的显示效果如下：

这里写图片描述
首先是在页面上用ajax请求数据库的数据，将返回的数据拼接为html，动态渲染在页面上。
代码如下：

 /*初始化角色配权限复选框*/    $(function () {        var roleExample = {}        callSapiServer("/role/list", function (data) {            var listHtml = '';            for (var i = 0; i < data.results.length; i++) {                listHtml += "<div class='col-md-2'>" +                        "<label>" +                        "<input type='checkbox' value='"+ data.results[i].id+"' name='ck'>" +                        "<span class='text'>" + data.results[i].role_name + "</span>" +                        "<span  style=''></span>" +                        "</label>" +                        "</div>";            }            $("#user_role").html(listHtml);            $("#user_role :checkbox").click(function () {                    }            );        }, "GET", roleExample, true, null, function () {            inituserrole(${id});        });    });

接着是用ajax向后台请求需要初始化默认选中的数据；

代码如下：

 function inituserrole(id){        var json ={            id:id        }        callSapiServer("/user/selectRoleOrPermission",function(data) {            $.each(data,function (i, s){                $("#user_role").find("input[type='checkbox']").each(function () {                    if(s.role_id ==$(this).val()){                        $(this).attr("checked", "checked");                    }                });            })        },"GET",json,true,null,function (){        });    }

到这里，动态加载以及初始化就完成了；当点击提交时还需要获取选中的值；

代码如下：

 $('#cc').click(tijiao);    function tijiao(){        var id = $("#id").val();        var arr = checkTag();        var array = JSON.stringify(arr);        var json = {            array : array,            id : id        }        $.ajax({            url:"/userRole/setUserRole",    //请求的url地址            data:json,    //参数值            type:"POST",   //请求方式            success:function(req){                //请求成功时处理            },            error:function(){                //请求出错处理            }        });    }    //获取CheckBox值    function checkTag() {        var perTag = document.getElementsByName("ck");        var arr = [];        for (var i = 0; i < perTag.length; i++) {            if (perTag[i].checked) {                //判断是否被选中                arr.push(perTag[i].value);            }        }        return arr;    }

最后是在复选框中常见的全选和反选的操作；

代码如下：

 //全选、取消    var CheckBox = document.getElementsByTagName('input');    //全选    function quanxuan() {        for (i = 0; i < CheckBox.length; i++) {            CheckBox[i].checked = true;        }        ;    }    ;    //反选    function fanxuan() {        for (i = 0; i < CheckBox.length; i++) {            if (CheckBox[i].checked == true) {                CheckBox[i].checked = false;            }        }    }    ;    $("#ss").click(function () {        quanxuan();    })    $("#bb").click(function () {        fanxuan();    })

0 0