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 相关文章推荐
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
JavaScript分页组件使用方法详解
Jul 26 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中$this-&amp;gt;含义分析
2009/11/29 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
JavaScript 学习笔记(五)
2009/12/31 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
innerText 使用示例
2014/01/23 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
Python线性回归实战分析
2018/02/01 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
Python多图片合并PDF的方法
2019/01/03 Python
Python3的socket使用方法详解
2020/02/18 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
中班开学寄语
2014/04/04 职场文书
城管综合整治方案
2014/05/01 职场文书
体育专业求职信
2014/07/16 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
公司周年庆寄语
2019/06/21 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫