jquery实现checkbox级联选择

最新推荐文章于 2025-06-05 12:50:38 发布

原创最新推荐文章于 2025-06-05 12:50:38 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #checkbox #级联选择

jquery 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的级联Checkbox功能，通过点击父级Checkbox可以控制子级Checkbox的选择状态，反之亦然。该功能适用于权限分配等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery实现checkbox级联选择

html代码：

<html>
<head>
</head>
<body>
<dt>  
<!--<img src="/crm/images/tree/tree_node_e_2.gif" /><img src="/crm/images/tree/folder_off.gif" />   -->
<span class="text-g">   
<input type="checkbox" name="functionIds" value='1' style="margin:3px 0 0;" index='1'/>  
<span style="margin-left:3px">建立活動</span>  
</span>  
</dt>  
<dt>  
<!-- <img src="/crm/images/tree/tree_vert.gif" /><img src="/crm/images/tree/tree_node_n_0.gif" />  
<img src="/crm/images/tree/item.gif" />  -->
<input type="checkbox" name="functionIds" value='2' style="margin:3px 0 0;" index='1_1'/>  
<span style="margin-left:3px">設定客戶群</span>：  
<input type="checkbox" name="functionIds" value='3' style="margin:3px 0 0;" index='1_1_1'  />基金  
<input type="checkbox" name="functionIds" value='4' style="margin:3px 0 0;" index='1_1_2'  />信用卡  
<input type="checkbox" name="functionIds" value='5' style="margin:3px 0 0;" index='1_1_3'  />黃金存摺  
</dt>  
<dt>  
<!--<img src="/crm/images/tree/tree_vert.gif" /><img src="/crm/images/tree/tree_node_n_0.gif" />  
<img src="/crm/images/tree/item.gif" />   -->
<input type="checkbox" name="functionIds" value='6' style="margin:3px 0 0;" index='1_2'/>  
<span style="margin-left:3px">訂定活動</span>：  
<input type="checkbox" name="functionIds" value='7' style="margin:3px 0 0;" index='1_2_1'  />基金  
<input type="checkbox" name="functionIds" value='8' style="margin:3px 0 0;" index='1_2_2'  />信用卡  
<input type="checkbox" name="functionIds" value='9' style="margin:3px 0 0;" index='1_2_3'  />黃金存摺  
</dt>  
<dt>  
<!-- <img src="/crm/images/tree/tree_vert.gif" /><img src="/crm/images/tree/tree_node_e_0.gif" />  
<img src="/crm/images/tree/item.gif" />  -->
<input type="checkbox" name="functionIds" value='10' style="margin:3px 0 0;" index='1_3'/>  
<span style="margin-left:3px">活動計劃</span>  
</dt>  
<dt>  
</body>
</html>

js代码：

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script>
	$(function(){  
        $(":checkbox").click(function(){  
            var index = $(this).attr("index");            
            $(":checkbox[index^="+index+"]").attr("checked",$(this).is(":checked"));              
            var parent_index = index.substring(0,index.length - 2);  
            $(":checkbox[index="+parent_index+"]").attr("checked",false);             
            var parentIsCheck = false;  
            $(":checkbox[index^="+parent_index+"]").each(function(i){         
                if($(this).is(":checked")){  
                    parentIsCheck = true;  
                }  
            });           
            $(":checkbox[index="+parent_index+"]").attr("checked",parentIsCheck);  
            var parent_parent_index = index.substring(0,parent_index.length - 2);             
            var parent_parent_is_check = false;  
            $(":checkbox[index="+parent_parent_index+"]").attr("checked",parent_parent_is_check);  
            $(":checkbox[index^="+parent_parent_index+"]").each(function(i){              
                if($(this).is(":checked")){  
                    parent_parent_is_check = true;  
                }  
            });           
            $(":checkbox[index="+parent_parent_index+"]").attr("checked",parent_parent_is_check);  
        });  
    });  
</script>

效果如图所示：