在页面中,经常需要控制一组 CheckBox 的选中状态,常用的操作有:
1.通过一个或者多个复选框来控制一组 CheckBox 的选中状态。
2.根据一组 CheckBox 的选中状态来决定某些控件的状态。如:
一组 CheckBox 中,至少有一项被选中,某个按钮才可以被点击,否则按钮处于灰色状态,不可点击。
一组 CheckBox 中,至少有一项被选中,某个文本框才可以输入内容,否则文本框处于失效状态,不可输入。
当页面有多处用到上述功能时,如何简单快速的实现这样的功能就成了关键。
先来看效果:
要使多个复选框成组,在写复选框的 HTML 代码时添加自定义属性 group ,如:
<input type="checkbox" group="groupname"/>
<input type="checkbox" group="groupname"/>
...
这样在页面显示时,group 名称相同的会成为一组。同样,在需要联动的对象的代码里添加自定义属性 forcheckboxgroup,名称为联动复选框组的 group 属性的值。当联动对象为复选框时,将控制全组的复选状态,当联动对象为其它元素时,复选框组将控制其 disabled 属性,规则是组内的复选框至少有一个选中时被联动的元素对象的 disabled 属性为 false,否则为 true。如:
<input type="checkbox" forcheckboxgroup="groupname"/>
<input type="button" value="按钮" forcheckboxgroup="groupname"/>
...
要实现上述的功能,需要在页面中引入一个脚本。这个脚本是实现上述功能的核心。它定义了一个函数,会查找所有元素的 forcheckboxgroup 属性和所有复选框的 group 属性,并将它们关联起来,动态定义相应的事件,达到实现联动的功能。
由于 Firefox 和 Opera 的 getAttribute 只能读取由 setAttribute 写入的自定义属性,不能读取 HTML 代码中的自定义属性,所以此功能只能在 IE 中实现,所以代码也就不再判断浏览器类型了。如为防止出错可以自行加上这些代码。
JS 文件内容如下:
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);