1. 程式人生 > >jq實現複選框聯級選中和取消動作

jq實現複選框聯級選中和取消動作

圖例如下:



<script>
    
    //獲取當前的複選框
    $('input[name=pri_id_list[]]').click(function(){
        //獲取當前級別
        var cur_level = $(this).attr('level');
        //獲取當前選中的狀態
        var chk = $(this).attr('checked');
        if(chk)
        {
            var tl = cur_level;
            //當前選中的所有上級許可權也是被選中
            if(cur_level > 0)
            {
               $(this).prevAll('input').each(function(){
                if($(this).attr('level')<tl)
                {
                    $(this).attr('checked','checked');
                    //跳過兄弟相等的,再找上一級
                    tl--;
                    if(tl<0)
                        return false;//退出迴圈
                }
               }) 
            }
        }

        else
        {
            //取消當前選中所有下級被選中的狀態
            $(this).nextAll('input').each(function(){
                if($(this).attr('level')>cur_level)
                {
                
                    $(this).attr('checked','');

                }
                else
                {
                    return false;
                }
            })
        }

        //若父級被取消,其子級下的複選框也會被取消
        if($(this).attr('level')>curl_level)
        {
            if($(this).attr('checked'))
            {
                $(this).nextAll('input').each(function(){
                if($(this).attr('level')>cur_level)
                {
                
                    $(this).attr('checked','');

                }
                else
                {
                    return false;
                }
            });
            }
        }

    });
</script>