采用JAVASCRIPT实现全选的三种情况

通常采用JAVASCRIPT实现页面全选的，主要有下面三种情况：

1、  当前页面中所有的CHECKBOX全部选中 及取消 。

2、  当前页面中所有同名的CHECKBOX全部选中。

3、当前页面中所有具有相同前缀名的CHECKBOX全部选中。

这里以实例的形式，展示了三种情况的操作，完整源代码如下：

< html >

< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > 全选示例 </ title >
</ head >

< body >
< form  action =""  method ="post"  name ="loginForm" >
/********************全选示例********************/ < br >
< b > 水果（checkbox同名）： </ b >< br >
< input  type ="checkbox"  name ="fruit"  value ="1" > 苹果 < br >
< input  type ="checkbox"  name ="fruit"  value ="2" > 梨 < br >
< input  type ="checkbox"  name ="fruit"  value ="3" > 桃 < br >
< input  type =button  value ="全选水果"  onclick ="checkAllFruit()" >
< input  type =button  value ="取消全选水果"  onclick ="unCheckAllFruit()" >< br >

< b > 蔬菜： </ b >< br >
< input  type ="checkbox"  name ="vegetable"  value ="4" > 大白菜 < br >
< input  type ="checkbox"  name ="vegetable"  value ="5" > 西红柿 < br >

< b > 水果2（checkbox不同名，具有相同的前缀名）： </ b >< br >
< input  type ="checkbox"  name ="_fruit1"  value ="6" > 苹果 < br >
< input  type ="checkbox"  name ="_fruit2"  value ="7" > 梨 < br >
< input  type ="checkbox"  name ="_fruit3"  value ="8" > 桃 < br >
< input  type =button  value ="全选水果2"  onclick ="checkAllFruit2()" >
< input  type =button  value ="取消全选水果2"  onclick ="unCheckAllFruit2()" >< br >

< input  type ="checkbox"  name ="vegetable"  onclick ="doChangeCheckStatus(this);" > 全选
< input  type =button  value ="所有全选"  onclick ="checkAll()" >
< input  type =button  value ="取消所有全选"  onclick ="unCheckAll()" >

</ form >
</ body >
</ html >
< Script  language ="JavaScript" > ...
function checkAll()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
                 objs[i].checked = true;

      }        

}
function checkAllFruit()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase() == "fruit")            
                    objs[i].checked = true;

      }        

}
function checkAllFruit2()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")
            ...{                
                    objs[i].checked = true;
            }
            
      }        

}
function unCheckAll()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )            
                    objs[i].checked = false;

      }        

}
function unCheckAllFruit()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase() == "fruit")
                    objs[i].checked = false;

      }        

}
function unCheckAllFruit2()
...{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) ...{
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")
                    objs[i].checked = false;

      }        

}
function doChangeCheckStatus(obj)
...{
    if(obj.checked==true)
    ...{
        checkAll();
    }
    else
    ...{
        unCheckAll();
    }
}

</ script >