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 相关文章推荐
javascript 对象的定义方法
Jan 10 Javascript
JavaScript中的其他对象
Jan 16 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
JS中作用域以及变量范围分析
Jul 18 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输入数据统一类实例
2015/02/23 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
使用js画图之画切线
2015/01/12 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
Nest.js散列与加密实例详解
2021/02/24 Javascript
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
python绘制简单折线图代码示例
2017/12/19 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
python实现静态服务器
2019/09/05 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
作弊检讨书1000字
2014/02/01 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
协议书格式
2014/04/23 职场文书
生物技术专业求职信
2014/06/10 职场文书
付款委托书范本
2014/10/05 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
图神经网络GNN算法
2022/05/11 Python