ASP.NET 2.0下利用javascript实现TreeView中的checkbox全选

实现了对Treeview控件中选择框CheckBox的全选处理。实现的是菜单选择框父项打勾后它下面的子项选择框全部为打勾。如果其中一项子 项取消打勾父项父项选择框为空。主要效果见下图:

主要的实现原理是在TreeView控件的onclick事件中用JS实现全选操作。

<script language="javascript"  type="text/javascript">   function OnTreeNodeChecked()   {    var ele = event.srcElement;    if(ele.type=='checkbox')    {        var childrenDivID = ele.id.replace('CheckBox','Nodes');        var div = document.getElementById(childrenDivID);        if(div != null)        {            var checkBoxs = div.getElementsByTagName('INPUT');            for(var i=0;i<checkBoxs.length;i++)            {                if(checkBoxs[i].type=='checkbox')                checkBoxs[i].checked=ele.checked;            }        }        else        {            var div = GetParentByTagName(ele,'DIV');            var checkBoxs = div.getElementsByTagName('INPUT');            var parentCheckBoxID = div.id.replace('Nodes','CheckBox');            var parentCheckBox = document.getElementById(parentCheckBoxID);            for(var i=0;i<checkBoxs.length;i++)            {                if(checkBoxs[i].type=='checkbox' && checkBoxs[i].checked)                {                    parentCheckBox.checked = true;                    return;                }            }            parentCheckBox.checked = false;        }    }}          function GetParentByTagName(element, tagName)          {            var parent = element.parentNode;            var upperTagName = tagName.toUpperCase();            while (parent && (parent.tagName.toUpperCase() != upperTagName))            {              parent = parent.parentNode ? parent.parentNode : parent.parentElement;            }             return parent;          }    </script>

剩下的就是TreeView控件绑定的onclick事件了。

<asp:TreeView ID="TreeView1" runat="server" onclick="OnTreeNodeChecked()" ShowCheckBoxes="All"   ExpandDepth="2" Width="100%" Height="100%">      </asp:TreeView>

至此实现了所有的用JS实现TreeView控件的全选与部分选择的问题。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索treeview
, checkbox
, 控件
, 选择
, var
javascript实现全选
,以便于您获取更多的相关知识。

时间: 2016-11-19

ASP.NET 2.0下利用javascript实现TreeView中的checkbox全选的相关文章

javascript使用avalon绑定实现checkbox全选

  checkbox全选应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢? duplex双工绑定是avalon绑定里面最有趣的一个,因为它在内部帮开发者做了很多事,让开发者写的代码减少,代码更优雅.下面随便演示一个常见的checkbox全选. 要求:(老掉牙了,还是说一下) 1.勾选了全选框后,下面的子选框全被勾选;没勾选全选框,则子选框全部不

javascript使用avalon绑定实现checkbox全选_javascript技巧

duplex双工绑定是avalon绑定里面最有趣的一个,因为它在内部帮开发者做了很多事,让开发者写的代码减少,代码更优雅.下面随便演示一个常见的checkbox全选. 要求:(老掉牙了,还是说一下) 1.勾选了全选框后,下面的子选框全被勾选:没勾选全选框,则子选框全部不勾选 2.子选框如果有一个未勾选,则取消全选框勾选: 3.子选框全部勾选,则勾选全选框 <!DOCTYPE html> <html> <head> <meta http-equiv="Co

利用jQuery实现CheckBox全选/全不选/反选的简单代码_jquery

jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional

asp.net 2.0下嵌套masterpage页的可视化编辑

asp.net|erp   相信大家都用过asp.net 2.0下的嵌套的masterpage功能,该功能很强大,可以让用户先制作出模版页后,然后很容易地套用到其他页面中去.而且模版页还可以嵌套的,但嵌套后的模版页,我们会发觉有一个问题,那就是当使用嵌套的模版页后,在设计视图状态下,是没办法对其进行可视化操作的,那么如何解决这个问题呢?我找了下老外的blog,找到了老外提供的一个方法,暂且可以绕个弯来解决该问题,下面讲解一下:    我们可以写一个基类,叫basepage.cs,放在app_co

javascript中CheckBox全选终极方案

  在javascript页面中实现CheckBox或者Radio的选中状态是一件很容易的事情,下面我们来给大家展示下在asp.net中使用javascript中CheckBox全选终极方案,有需要的小伙伴可以参考下. 在我们的程序开发中经常会要用到CheckBox的全选,通常情况下是在一些数据绑定控件中如Gridview等 下面以Repeater为例,在Repeater的header 和item中放入CheckBox控件 . ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14

javascript中CheckBox全选终极方案_javascript技巧

在我们的程序开发中经常会要用到CheckBox的全选,通常情况下是在一些数据绑定控件中如Gridview等 下面以Repeater为例,在Repeater的header 和item中放入CheckBox控件 . <asp:Repeater ID="rptGroup" runat="server"> <HeaderTemplate> <table width="100%" cellspacing="1&quo

新手学JavaScript(四)----CheckBox全选与全不选

    前两天开发界面时,实现了一个新的小功能,CheckBox复选框的全选与全不选 样式的实现 纯CSS实现 VS JQuery+CSS实现     在这给大家推荐一款比较不错的纯CSS实现的CheckBox–CSSCheckBox,用bootstrap里面自带的checkbox和radio样式不太美观,所以就另找了一个插件,这里大家可能会有疑问,为什么要找一个纯CSS实现的CheckBox?     在这里给大家解释一下,如果说你找的Checkbox是用CSS+Javascript实现的话,

实现checkbox全选、反选、取消JavaScript小脚本异常_javascript技巧

今天在实现checkbox全选,反选,取消JavaScript小脚本的时候,总是出现点击后页面瞬间刷新,选择的checkbox全部取消的问题,debug了半天,才发现原来是<button>标签中少写了一个type属性的原因,郁闷啊,希望自己以后少犯这种特别2的错误,特此记录. 复制代码 代码如下: <!-- 以下为错误写法 --> <button name="checkAll" value="全选" class="checkB

javascript实现checkbox全选的代码_javascript技巧

代码: function checkall(checkNames){ var allBoxs = document.getElementsByName(checkNames); for(var i = 0 ;i<allBoxs.length;i++){ if(allBoxs[i].type == 'checkbox'){ if(allBoxs[i].checked==false){ allBoxs[i].checked = true ; }else{ allBoxs[i].checked = f