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模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 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 stream_context_create()作用和用法分析
2011/03/29 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
python使用多线程不断刷新网页的方法
2015/03/31 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
新闻专业毕业生英文求职信
2014/03/19 职场文书
优秀护士先进事迹
2014/05/08 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
律师函格式范本
2015/05/27 职场文书
2015年教师国培感言
2015/08/01 职场文书
学校远程教育工作总结
2015/08/11 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript