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

在页面中,经常需要控制一组 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 文件内容如下:

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 type="text/javascript"> function CheckboxGroup(){ var arrelement = document.all; var i=0; while(i

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

Triumph

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值