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实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
JS性能优化实现方法及优点进行
Aug 30 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
Python中Django发送带图片和附件的邮件
2017/03/31 Python
详解python读取image
2019/04/03 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
J2EE中常用的名词进行解释
2015/11/09 面试题
编辑个人求职信范文
2013/09/21 职场文书
医护人员英文求职信范文
2013/11/26 职场文书
酒店办公室文员岗位职责
2013/12/18 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫