Jquery操作TreeView 父节点checkbox选中,子节点checkbox也选中

本文详细介绍了如何通过JavaScript对ASP.Net2.0Treeview控件进行自定义操作,并深入解析了DOM结构以实现复杂的数据交互。通过绑定事件和DOM查找,实现了基于checkbox的选择操作,进而获取并操作树形结构中的特定节点。

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

 

        function CheckSub() {

            var ClickChecked = $(this).attr("checked");

            var ClickID = $(this).attr("id").toString();

            var SubID = ClickID.replace("CheckBox", "Nodes");

            $("#" + SubID).find("input[type='checkbox']").attr("checked", ClickChecked);

            //获取选中的checkbox的部门ID

            var DeptIDS = "";

            $("#TreeView1").find("input[type='checkbox']").each(function (i) {

                var checked = $(this).attr("checked");

                if (checked == true) {

                    DeptIDS = DeptIDS + "," + $(this).attr("title").toString();

                }

            });

}

 

 

绑定相应的事件

 

 

      $(document).ready(function () {

            $("input[type='checkbox']").bind("click", CheckSub);          

        });

 

 

 

 

ASP.Net 2.0 Treeview自动生成的Html脚本结构如下:
<div>          //树
      <table/> //节点
      <div/>   //节点的子节点,里面的内容是一个或多个<table/><div/>
</div>
因此是<table/><div/>构成一个节点,但很难明确的在DOM中确定一个节点,原因如下:
1.        其ID或Name是顺序排列的,命名规则如下: 树ID + “n” + 节点序号,例如 MyTreen0
商业的TreeView一般在ID中包含层次信息,如: MyTreeNode1_1_2 表示树的1.1.2那个节点,分析起来很容易
2.        上面描述的节点命名的ID,是分配给<table/>里的<A/>也就是显示 加号 减号的那个链接元素,由于该元素在<table/>中,因此给分析带来了难度
3.        叶子节点没有上面所描述的<table/>里的那个<A/>
用当前选中的checkbox的ID  MyTreen0Checkbox去掉 checkbox(替换为Nodes) 得到的是节点的node的ID MyTreen0Nodes
再用这个节点的ID来获取其孩子是checkbox的所有ID并进行相应的操作

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值