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 相关文章推荐
JS字符串处理实例代码
Aug 05 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
JavaScript原型链中函数和对象的理解
Jun 16 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 数字左侧自动补0
2008/03/31 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
jQuery使用手册之一
2007/03/24 Javascript
详解参数传递四种形式
2015/07/21 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
python获取本地计算机名字的方法
2015/04/29 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
2014年健康教育实施方案
2014/02/17 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
数学备课组工作总结
2015/08/12 职场文书
python OpenCV学习笔记
2021/03/31 Python
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android