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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
微信小程序定位当前城市的方法
Jul 19 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 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
substr()函数中文版
2006/10/09 PHP
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
Javascript实现的分页函数
2007/02/07 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
Jquery ui css framework
2010/06/28 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
python验证码识别实例代码
2018/02/03 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Python map及filter函数使用方法解析
2020/08/06 Python
python tqdm库的使用
2020/11/30 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
英文版银行求职信
2013/10/09 职场文书
财务部岗位职责
2015/02/03 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
python urllib库的使用详解
2021/04/13 Python
mysq启动失败问题及场景分析
2021/07/15 MySQL
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫