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 相关文章推荐
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 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
Ajax PHP分页演示
2007/01/02 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
JS实现打字游戏
2019/12/17 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
JavaScript实现打字游戏
2021/02/19 Javascript
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python图算法实例分析
2016/08/13 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
python logging模块的使用总结
2019/07/09 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
卫校毕业生自我鉴定
2013/10/31 职场文书
药品质量检测应届生求职信
2013/11/14 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
餐饮营销方案
2014/02/23 职场文书
教职工代表大会主持词
2014/04/01 职场文书
车队安全员岗位职责
2015/02/15 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript