TreeView checkbox 全选

在使用TreeView 控件 ,进行权限管理的时候,需要使用 checkbox全选。

勾选父节点,子节点全部选中。取消父节点,子节点不选中。

勾选子节点,父节点也选中。

以下是在使用的例子:

<asp:TreeView ID="TVPermission"  runat="server" NodeIndent="20" Target="mainFrame" ExpandDepth="2"  ShowCheckBoxes="All"/>

TreeView 控件

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {            TVPermission.Attributes.Add("OnClick","OnTreeNodeChecked()");
        }
    }

页面加载

 1 <script type ="text/javascript" >
 2     function OnTreeNodeChecked() {
 3         var ele = event.srcElement;
 4         if (ele.type==‘checkbox‘) {
 5             var childrenDivID = ele.id.replace(‘CheckBox‘, ‘Nodes‘);
 6             var div = document.getElementById(childrenDivID);
 7
 8             if (div != null) {
 9                 var checkBoxs = div.getElementsByTagName("INPUT");
10                 for (var i = 0; i < checkBoxs.length; i++) {
11                     if (checkBoxs[i].type == ‘checkbox‘) {
12                         checkBoxs[i].checked = ele.checked;
13                     }
14                 }
15             }
16             CheckOn(ele);
17         }
18     }
19     function CheckOn(obj) {
20         var div1 = WebForm_GetParentByTagName(obj, ‘DIV‘);
21         if (div1 != null) {
22             var checkBoxs = div1.getElementsByTagName(‘INPUT‘);
23             var parentCheckBoxID = div1.id.replace(‘Nodes‘, ‘CheckBox‘);
24             var parentCheckBox = document.getElementById(parentCheckBoxID);
25
26             if (parentCheckBox != null) {
27                 parentCheckBox.checked = true;
28                 CheckOn(parentCheckBox);
29                 CheckOn(parentCheckBox);
30             }
31         }
32     }
33 </script>

前端脚本

时间: 2024-10-30 09:42:05

TreeView checkbox 全选的相关文章

JQuery操作TreeView的全选,反选

1 <asp:TreeView ID="tv" runat="server" ExpandDepth="2" ShowCheckBoxes="All" 2 ShowLines="True" ImageSet="Msdn" > 3 </asp:TreeView> JavaScript部分代码 1 $( 2 function () { 3 //顶级选择 4 $(&qu

关于input[type=&#39;checkbox&#39;]全选的问题

今天在做一个全选功能的时候,发现了一个问题,就是如果我在选择全选之前,我就已经选择了一个input,然后我再去选择全选并且以后再取消全选的时候,这个我之前选择的input始终处于选择状态,但是他的checked的值一直是在true和false之间变化,当checked=false的时候,仍然是被选中的.到现在还没处理好这个问题.希望看到的哪位大神能给个好的解决办法,实在感激.下面是类似的代码. <!DOCTYPE html><html lang="en"><

利用jQuery实现CheckBox全选/全不选/反选

转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%>   <!DOCTYPE

js初学—实现checkbox全选功能

布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id="div1"> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkb

checkbox 全选,反选 ,全不选

在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对列表进行循环检测,此时可以将所有的(无论之前什么状态),设为选中,也可对未选中的进行选中. 2. 反选:当反选checkbox被点击(不管点击之前是什么装填)后,获取其其状态值,对列表进行循环检测,将被检测的元素的checked状态反向处理,即可. 3. 列表全选或者不全选:当列表中的任意一个che

jQuery设置checkbox全选(区别jQuery版本)

jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery版本不同而已. jQuery很多版本都会对一些小的功能做一些改进,比如checkbox的选中. jQuery对checkbox改动的界线版本 jquery1.9.1. jquery1.9.1之前,全选是这样的: $('#checkbox').attr('checked',true) $('#chec

Jquery 组checkbox全选checkbox

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title></title> <style> </style></head><body><form action=""> <input type="checkbox&quo

表单javascript checkbox全选 反选 全不选

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>javascript checkbox全选 反选 全不选</title> <meta name="des

jQuery --checkbox全选和取消全选简洁高效的解决办法

最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二. html代码如下: <fieldset data-role="controlgroup">  <label><input type="checkbox" name="boxes" id="select_al