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 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 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获取本周第一天和最后一天示例代码
2014/02/24 PHP
浅析php原型模式
2014/11/25 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
nodejs教程之入门
2014/11/21 NodeJs
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
vue实现简单瀑布流布局
2020/05/28 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python中方法链的使用方法
2016/02/23 Python
图文详解WinPE下安装Python
2016/05/17 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
求网格中的黑点分布
2013/11/06 面试题
2014庆六一活动方案
2014/03/02 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
设备售后服务承诺书
2014/05/30 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
学期个人自我总结
2015/02/13 职场文书
入党团支部推荐意见
2015/06/02 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python
利用Python实时获取steam特惠游戏数据
2022/06/25 Python