checkbox 多选框 联动实现代码


Posted in Javascript onOctober 22, 2008

父类

<input type="checkbox" name="father" forcheckboxgroup="groupname1"/>

子类
<input type="checkbox" name="son" group="groupname1"/>

实现代码
<script type="text/javascript"> 
function CheckboxGroup(){ 
var arrelement = document.all; 
var i=0; 
while(i<arrelement.length){ 
var forgroupattrib = arrelement[i].getAttribute('forcheckboxgroup'); 
if(forgroupattrib != null && forgroupattrib != ''){ 
arrelement[i].setAttribute('groupmember',_getGroupMember(arrelement[i])); 
if(arrelement[i].tagName.toLowerCase() == 'input' && arrelement[i].type == 'checkbox'){ 
arrelement[i].onclick=function(){ 
//----------------------Checked All------------------ 
var groupmember = this.getAttribute('groupmember'); 
var i = 0; 
while(i<groupmember.length){ 
groupmember[i].checked = this.checked; 
i++; 
} 
//--------------------------------------------------- 
} 
} 
_setState(arrelement[i]); 
} 
i++; 
} 
} function _getGroupMember(o){ 
var groupname = o.getAttribute('forcheckboxgroup'); 
var items = new Array; 
var inputs = document.getElementsByTagName('input'); 
var i=0; 
while(i<inputs.length){ 
if(inputs[i].type == 'checkbox'){ 
var groupattrib = inputs[i].getAttribute('group'); 
if(groupattrib == groupname){ 
items[items.length] = inputs[i]; 
var master = inputs[i].getAttribute('groupmaster'); 
if (master == null) { 
master = new Array; 
master[0] = o.uniqueID; 
inputs[i].setAttribute('groupmaster', master); 
} 
else{ 
master[master.length] = o.uniqueID; 
} 
inputs[i].onpropertychange = function(){ 
if (event.propertyName == 'checked') { 
var arro = this.getAttribute('groupmaster'); 
var i = 0; 
while (i < arro.length) { 
_setState(document.getElementById(arro[i])); 
i++; 
} 
} 
} 
} 
} 
i++; 
} 
return items; 
} 
function _setState(o){ 
var master = o; 
if(master!=null){ 
var chkselall = true; 
var chknosel = true; 
var groupmember = master.getAttribute('groupmember'); 
var i = 0; 
while(i<groupmember.length){ 
if(chkselall)chkselall = groupmember[i].checked; 
if(chknosel)chknosel = !groupmember[i].checked; 
i++; 
} 
if(master.tagName.toLowerCase() == 'input'&&master.type=='checkbox'){ 
if (chkselall) { 
master.indeterminate = false; 
master.checked = true; 
} 
if (chknosel) { 
master.indeterminate = false; 
master.checked = false; 
} 
if(!chkselall&&!chknosel)master.indeterminate = true; 
} 
else{ 
master.disabled = chknosel; 
} 
} 
} 
window.attachEvent('onload',CheckboxGroup); 
</script>
Javascript 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
js中延迟加载和预加载的具体使用
Jan 14 Javascript
如何用JavaScript学习算法复杂度
Apr 30 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 #Javascript
javascript Select标记中options操作方法集合
Oct 22 #Javascript
JavaScript Undefined,Null类型和NaN值区别
Oct 22 #Javascript
javascript TextArea动态显示剩余字符
Oct 22 #Javascript
Javascript this关键字使用分析
Oct 21 #Javascript
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 #Javascript
JavaScript confirm选择判断
Oct 18 #Javascript
You might like
php header()函数使用说明
2008/07/10 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python函数局部变量用法实例分析
2015/08/04 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
Python中类的初始化特殊方法
2017/12/01 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
如何利用find命令查找文件
2015/02/07 面试题
电子信息工程专业推荐信
2014/02/14 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
详解Vue的options
2021/05/15 Vue.js
Java输出Hello World完美过程解析
2021/06/13 Java/Android
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android