html下拉复选框联动,HTML：CheckBox复选框成组联动
（JavaScript）
在页⾯中，经常需要控制⼀组 CheckBox 的选中状态，常⽤的操作有：
1.通过⼀个或者多个复选框来控制⼀组 CheckBox 的选中状态。
2.根据⼀组 CheckBox 的选中状态来决定某些控件的状态。如：
⼀组 CheckBox 中，⾄少有⼀项被选中，某个按钮才可以被点击，否则按钮处于灰⾊状态，不可点击。
⼀组 CheckBox 中，⾄少有⼀项被选中，某个⽂本框才可以输⼊内容，否则⽂本框处于失效状态，不可输⼊。
当页⾯有多处⽤到上述功能时，如何简单快速的实现这样的功能就成了关键。
先来看效果：
复选框联动
全选
11111
22222
33333
44444
55555
66666
两个复选框联动
全选
11111
22222
33333
44444
55555
66666
html下拉菜单的制作方法
全选
其它对象联动
全选
11111
22222
33333
66666
全选
要使多个复选框成组，在写复选框的 HTML 代码时添加⾃定义属性 group ，如：
...
这样在页⾯显⽰时，group 名称相同的会成为⼀组。同样，在需要联动的对象的代码⾥添加⾃定义属性 forcheckboxgroup，名称为联动复选框组的 group 属性的值。当联动对象为复选框时，将控制全组的复选状态，当联动对象为其它元素时，复选框组将控制其 disabled 属性，规则是组内的复选框⾄少有⼀个选中时被联动的元素对象的 disabled 属性为 false，否则为 true。如：
...
要实现上述的功能，需要在页⾯中引⼊⼀个脚本。这个脚本是实现上述功能的核⼼。它定义了⼀个函数，会查所有元素的forcheckboxgroup 属性和所有复选框的 group 属性，并将它们关联起来，动态定义相应的事件，达到实现联动的功能。
由于 Firefox 和 Opera 的 getAttribute 只能读取由 setAttribute 写⼊的⾃定义属性，不能读取 HTML 代码中的⾃定义属性，所以此功能只能在 IE 中实现，所以代码也就不再判断浏览器类型了。如为防⽌出错可以⾃⾏加上这些代码。
JS ⽂件内容如下：
function
CheckboxGroup(){
var
arrelement
=
document.all;
var
i
=
;
while
(i
<
arrelement.length){
var
forgroupattrib
=
arrelement[i].getAttribute(
'
forcheckboxgroup
if
(forgroupattrib
!
=
null
&&
forgroupattrib
!=
''
){
arrelement[i].setAttribute(
'
groupmember
'
,
_getGroupMember(arrelement[i]));
if
(arrelement[i].LowerCase() ==
'
input
'
&&
arrelement[i].type
==
'
checkbox
'
){
arrelement[i].onclick
=
function
(){
groupmember
=
this
.getAttribute(
'
groupmember
'
);
var
i
=
;
while
(i
<
groupmember.length){
groupmember[i].checked
=
this
.checked;
i
++
;
}
//
---------------------------------------------------}
}
_setState(arrelement[i]);
}
}
}
function
_getGroupMember(o){
var
groupname
=
'
forcheckboxgroup
'
);
var
items
=
new
Array;
var
inputs
=
input
'
);
var
i
=
;
while

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。