全选复选框选择问题：当下面的复选框全部被选中时，全选复选框自动被选中

要实现的功能：当下面的复选框全部被选中时，全选复选框自动被选中。用javascript实现。下面给下代码：
请注意以下：我的代码里已经有了两个关于复选框的方法了
   <script language="JavaScript">
function CheckAll(form) {//方法一：当全选复选框选中(为选中)时，下面的所有复选框全部选中(全部未被选中)
  for (var i=0;i<form.elements.length;i++)    {
    var e = form.elements[i];
    if (e.name != 'checkbox')
e.checked = form.selectAllCK.checked; 
   }
  }

function checkOne(obj){//方法二：在全选复选框被选中（且下面的所有复选框全部被选中）的前提下，
                                          ///当下面的某个复选框不被选中时，全选复选框自动不被选中
if(!obj.checked){
document.forms[0].selectAllCK.checked = obj.checked;
}
}
   </script><body leftmargin="0" topmargin="0" > 
<form>
<TABLE width="98%"  border="0" cellPadding="3" cellSpacing="1" class="datatable">
      <TR class="trtitle"> 
        <TD width="10%"><div align="center" >
            <input type="checkbox" name="selectAllCK" id="selectAllCK" value="checkbox" onclick="CheckAll(this.form);">
         全选</div>
        </TD>
      </TR>
   
     <c:forEach items="${pageBean.dataList}" var="item" varStatus="s">
       <TR class="tr01">    
        <td ><div align="center">
          <input type="checkbox" name="usercheckbox" id="usercheckbox" class="usercheckbox" onclick="checkOne(this);" value="${item.id}">
        </div>
        </td>
      </TR>
     </c:forEach> 
  </TABLE>
 </form>
</body>在上面代码的基础上，我该怎么写提问中所提到功能的代码？该写在哪？如何调用？谢谢！

解决方案 »

  1.   

    参考我写的
    function seleceAll(){
    var sel = document.getElementById("selectall");
    var database = document.getElementsByName("database");
    if(sel.checked)
    {
    for(var i=0;i<database.length;i++){
    database[i].checked=true;
    }
    }
    else
    {
    for(var i=0;i<database.length;i++){
    database[i].checked=false;
    }
    }
    }
      

  2.   


    function checkOne(obj){
      if(!obj.checked){
        document.forms[0].selectAllCK.checked = obj.checked; 
      }
      var b = true;
      var arr = document.getElementsByName(obj.name);
      for(var i=0;i<arr.length;i++){
         if(!arr[i].checked){b=false; break;}
      }
      document.forms[0].selectAllCK.checked = b;
    } 
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    <!--
    .STYLE1 {color: #FFFFFF}
    -->
    </style>
    <script  type="text/javascript">
    /*----------------------------------------------////
    *根据ID选择对象
    @param   {String}sId
    @return  {HtmlElement}
    */function $(sId){
    return document.getElementById(sId);
    }
    /*----------------------------------------------////
    *选择所有
    *@param  {boolean}state  选中状态
    */function selectAll(state){
    var oTbody=$("tbody1");
    var aInputs=oTbody?oTbody.getElementsByTagName("input"):[];
    var i,nLen=aInputs.length;

    for(i=0;i<nLen;i++){
    if(aInputs[i].type.toLowerCase()=="checkbox")
    aInputs[i].checked=state;
    }
    }
    /*----------------------------------------------////
    *当页面载入时绑定选中处理函数
    */window.onload=function(){
    var nSelCount=function(){//若果你知道确切个数可省略计算
    var oTbody=$("tbody1");
    var aInputs=oTbody?oTbody.getElementsByTagName("input"):[];
    var i,nSelCount=0,nLen=aInputs.length;

    for(i=0;i<nLen;i++){
    if(aInputs[i].checked)
    nSelCount++;
    }
    return nSelCount;
    }();

    var nChkCount=function(){//若果你知道确切个数可省略计算
    var oTbody=$("tbody1");
    var aInputs=oTbody?oTbody.getElementsByTagName("input"):[];
    var i,finds=0,nLen=aInputs.length;

    for(i=0;i<nLen;i++){
    if(aInputs[i].type.toLowerCase()=="checkbox")
    finds++;
    }
    return finds;
    }();

    var fn=function(e){
    var evt=e||window.event;
    var srcEl=evt.target||evt.srcElement;
    nSelCount+=srcEl.checked?1:-1;
    $("chkAll").checked=(nSelCount==nChkCount);
    }

    var oTbody=$("tbody1");
    var aInputs=oTbody?oTbody.getElementsByTagName("input"):[];
    var i,finds=0,nLen=aInputs.length;

    for(i=0;i<nLen;i++){
    if(aInputs[i].type.toLowerCase()=="checkbox")
    aInputs[i].onclick=fn;
    }
    }</script>
    </head>
    <body>
    <table width="52%" border="1" cellspacing="0" cellpadding="0">
    <thead>
            <tr>
                <td width="15%" align="center" bgcolor="#999999">
                    <input type="checkbox" id="chkAll" onclick="selectAll(this.checked)"/>
                 </td>
                <td width="36%" align="center" bgcolor="#999999"><span class="STYLE1">列1</span></td>
                <td width="49%" align="center" bgcolor="#999999"><span class="STYLE1">列2</span></td>
            </tr>
        </thead>
        <tbody id="tbody1">
            <tr>
                <td align="center"><input type="checkbox" /></td>
                <td>11</td>
                <td>12</td>
            </tr>
            <tr>
                <td align="center"><input type="checkbox" /></td>
                <td>21</td>
                <td>22</td>
            </tr>
            <tr>
                <td align="center"><input type="checkbox" checked="checked"/></td>
                <td>31</td>
                <td>32</td>
            </tr>
            <tr>
                <td align="center"><input type="checkbox" /></td>
                <td>41</td>
                <td>42</td>
            </tr>
        </tbody>
    </table>
    </body>
    </html>
      

  4.   


    还是hookee明白我的意思啊。谢谢！另外，也谢谢另外两位的参与！