jquery 实现内容的级联选取

时间:2021-06-20 03:15:16

jquery 实现内容的级联选取

// 为所有的选择框绑定点击事件
$(":checkbox").click(function(){
    // 先取出当前权限的level值是多少
    var cur_level = $(this).attr("level");
    // 判断是选中还是取消
    if($(this).attr("checked"))
    {
        var tmplevel = cur_level; // 给一个临时的变量后面要进行减操作
        // 先取出这个复选框所有前面的复选框
        var allprev = $(this).prevAll(":checkbox");
        // 循环每一个前面的复选框判断是不是上级的
        $(allprev).each(function(k,v){
            // 判断是不是上级的权限
            if($(v).attr("level") < tmplevel)
            {
                tmplevel--; // 再向上提一级
                $(v).attr("checked", "checked");
            }
        });
        // 所有子权限也选中
        // 先取出这个复选框所有前面的复选框
        var allprev = $(this).nextAll(":checkbox");
        // 循环每一个前面的复选框判断是不是上级的
        $(allprev).each(function(k,v){
            // 判断是不是上级的权限
            if($(v).attr("level") > cur_level)
                $(v).attr("checked", "checked");
            else
                return false;   // 遇到一个平级的权限就停止循环后面的不用再判断了
        });
    }
    else
    {
        // 先取出这个复选框所有前面的复选框
        var allprev = $(this).nextAll(":checkbox");
        // 循环每一个前面的复选框判断是不是上级的
        $(allprev).each(function(k,v){
            // 判断是不是上级的权限
            if($(v).attr("level") > cur_level)
                $(v).removeAttr("checked");
            else
                return false;   // 遇到一个平级的权限就停止循环后面的不用再判断了
        });
    }
});