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 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 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
php5数字型字符串加解密代码
2008/04/24 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
JS之相等操作符详解
2016/09/13 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
浅谈vue权限管理实现及流程
2020/04/23 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Python List cmp()知识点总结
2019/02/18 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
学年自我鉴定范文
2013/10/01 职场文书
我的求职择业计划书
2014/04/04 职场文书
关于教师节的广播稿
2014/09/10 职场文书
筑梦中国心得体会
2016/01/18 职场文书