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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
jQuery的强大选择器小结
Dec 27 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 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/10/09 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
PHP缓冲区用法总结
2016/02/14 PHP
php查询操作实现投票功能
2016/05/09 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
用原生js做单页应用
2017/01/17 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python修改操作系统时间的方法
2015/05/18 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
Python常用算法学习基础教程
2017/04/13 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
电气自动化求职信
2014/06/24 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
成都人事代理协议书
2014/10/25 职场文书
小学教师节活动总结
2015/03/20 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript