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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
初识Javascript小结
Jul 16 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 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日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
vue实现文件上传功能
2018/08/13 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
python列表的常用操作方法小结
2016/05/21 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
Python表示矩阵的方法分析
2017/05/26 Python
使用python爬取B站千万级数据
2018/06/08 Python
树莓派升级python的具体步骤
2020/07/05 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
.net面试题
2015/12/22 面试题
2014年法制宣传日活动方案
2014/11/02 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
于丹论语心得观后感
2015/06/15 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL