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.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
JS中准确判断变量类型的方法
Jun 01 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
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
python sort、sorted高级排序技巧
2014/11/21 Python
python创建临时文件夹的方法
2015/07/06 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
python实现周期方波信号频谱图
2018/07/21 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
艺术系应届生的自我评价
2013/10/19 职场文书
白酒代理协议书范本
2014/10/26 职场文书
厉行节约工作总结
2015/08/12 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
angular异步验证器防抖实例详解
2022/03/31 Javascript