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中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
node中使用shell脚本的方法步骤
Mar 23 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类
2006/07/15 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
PHP 微信支付类 demo
2015/11/30 PHP
php新建文件的方法实例
2019/09/26 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
js活用事件触发对象动作
2008/08/10 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Python 数据结构之队列的实现
2017/01/22 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
旷课检讨书3000字
2014/02/04 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
企业诚信承诺书
2014/05/23 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
JavaScript 定时器详情
2021/11/11 Javascript