多级复选框checkbox

Html

Css

$(function() {
    var j = [{
            id: 1,
            name: "a", //爷爷
            child: [{
                    id: "1-1",
                    name: "a-1", //爸爸
                    child: [{
                            id: "1-1-1",
                            name: "a-1-1"
                        }, //儿子
                        {
                            id: "1-1-2",
                            name: "a-1-2"
                        }
                    ]
                }, //儿子
                {
                    id: "1-2",
                    name: "a-2"
                }
            ]
        }, //叔叔
        {
            id: 2,
            name: "b"
        }, //二爷爷
        {
            id: 3,
            name: "c"
        }
    ]; //三爷爷
    digui(j);

//判断关系确定checked
$(function() {
    $(":checkbox").click(function() {
        //判断儿子
        var index = $(this).attr("index");
        //根据index开头的判断           
        $(":checkbox[index^=" + index + "]").attr("checked", $(this).is(":checked"));
        //将index减少2判断父亲叔叔              
        var index1 = index.substring(0, index.length - 2);
        $(":checkbox[index=" + index1 + "]").attr("checked", false);
        var check1 = false;
        $(":checkbox[index^=" + index1 + "]").each(function(i) {
            if ($(this).is(":checked")) {
                check1 = true;
            }
        });
        $(":checkbox[index=" + index1 + "]").attr("checked", check1);
        //将index继续减少2判断爷爷 
        var index2 = index.substring(0, index1.length - 2);
        var check2 = false;
        $(":checkbox[index=" + index2 + "]").attr("checked", check2);
        $(":checkbox[index^=" + index2 + "]").each(function(i) {
            if ($(this).is(":checked")) {
                check2 = true;
            }
        });
        $(":checkbox[index=" + index2 + "]").attr("checked", check2);
    });
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3

立即下载

多级复选框checkbox

代码描述：递归+js实现多级复选框

先定义数组，需要多级复选的话就数组下再定义数组，这样复选器就不会是写死的，随时可控制。
再通过递归编写出多级复选器。
最后通过一个方法通过判断父子关系实现功能。
本多级复选器支持选中子必选中其父，选中父，其所有子也将被选中，符合日常使用逻辑。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

╉┽奋斗丶つ

相关代码

多级复选框checkbox

最新