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

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

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

 /*初始化角色配权限复选框*/
    $(function () {
        var roleExample = {}
        callSapiServer("/role/list", function (data) {
            var listHtml = '';
            for (var i = 0; i < data.results.length; i++) {
                listHtml += "
" +
                        "" +
                        "" +
                        "" + data.results[i].role_name + "" +
                        "" +
                        "" +
                        "
";
            }
            $("#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();
    })