HTML : CheckBox 复选框成组联动(JavaScript)

在页面中，经常需要控制一组 CheckBox 的选中状态，常用的操作有：

1.通过一个或者多个复选框来控制一组 CheckBox 的选中状态。

2.根据一组 CheckBox 的选中状态来决定某些控件的状态。如：
    一组 CheckBox 中，至少有一项被选中，某个按钮才可以被点击，否则按钮处于灰色状态，不可点击。
    一组 CheckBox 中，至少有一项被选中，某个文本框才可以输入内容，否则文本框处于失效状态，不可输入。

当页面有多处用到上述功能时，如何简单快速的实现这样的功能就成了关键。

先来看效果：

复选框联动

全选

11111
22222
33333
44444
55555
66666

两个复选框联动

全选

11111
22222
33333
44444
55555
66666

全选

其它对象联动

全选

11111
22222
33333
44444
55555
66666

全选

 

要使多个复选框成组，在写复选框的 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 文件内容如下：

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);