JS 控制全选复选框


<html><head><script type="text/javascript">function chkall(){   
    for(var i=0;i <document.form1.elements.length;i++)  { 
        var   e=document.form1.elements[i]; 
         
                 if(e.checked==false){
                    e.checked=true;
                   }else{
                    e.checked=false;
                  }
     }
} var check_flag=true;
function  chk(){ var chkall=document.getElementsByName('chks');  
 
   
      if(check_flag==true){ 
              if(chkall.length>0){
                  for(var i=0;i<chkall.length;i++){
                        if(chkall[i].checked==false){               
                           chkall[i].checked=true;
                          }
                   else if(chkall[i].checked==true){
                           chkall[i].checked=true;
                           
                              check_flag=false;
                          
                         }                      }
               }
           
         }
   else if(check_flag==false){
                 if(chkall.length>0){
                  for(var i=0;i<chkall.length;i++){
                        if(chkall[i].checked==false){
                           chkall[i].checked=false;
                          }
                        else if(chkall[i].checked==true){
                           chkall[i].checked=false;
                           check_flag=true;
                         }
                      }
               }
         }
  }</script></head>
<body>
<form name="form1" >
<input type="button" name="chkes"  onclick="chkall()" value="chkall"/>
<br>
<input type="button" name="chkesss"  onclick="chk()" value="用这个"/>
<br>
<input type="checkbox" name="chks" value="1"/>
<br/>
<input type="checkbox" name="chks" value="2"/>
<br/>
<input type="checkbox" name="chks" value="3"/>
<br/>
<input type="checkbox" name="chks" value="4"/>
<br/>
<input type="checkbox" name="chks" value="5"/>
<br/>
<input type="checkbox" name="chks" value="6"/>
<br/>
<input type="checkbox" name="chks" value="7"/>
<br/>
<input type="checkbox" name="chks" value="8"/>
<br/>
<input type="checkbox" name="chks" value="9"/>
<br/></form></body>
</html>点击“用这个”按钮来做测试；
要求：1.复选框中一个都没有选中则全部全中；
      2.复选框中选中了几个也全部选中；
      3.再次点击消除所有选中；然后第四次点击时全部全中以此为循环；
上述功能我都实现了。但是总要点击多次才能得到我想要的结果。能不能做到没有点空的情况；请高手们
给点建议！！！

解决方案 »

  1.   

    function chkall(){
    var chkall=document.getElementsByName('chks');  
       
        for(var i=0;i <chkall.length;i++)  { 
           chkall[i].checked=true;
         }
    } 
    1.复选框中一个都没有选中则全部全中；
      2.复选框中选中了几个也全部选中； 这句话怎么理解？
    你是要做反选吗？如果是反选：function chkall(){
    var chkall=document.getElementsByName('chks');  
       
        for(var i=0;i <chkall.length;i++)  { 
           chkall[i].checked=！chkall[i].checked;
         }
    } 
      

  2.   

    不是反选，是如果点击了部分复选框后，再点击BUTTON 。变成复选框全部选中。
      

  3.   

    <META NAME="Author" CONTENT="theforever(碧海情天),赵亮">
    <meta http-equiv="blog" content="blog.csdn.net/theforever">
    <meta http-equiv="email" content="[email protected]">
    <META NAME="Keywords" CONTENT="theforever,csdn,碧海情天,赵亮">
    <script type="text/javascript">
    function chkall(){
        for(var i=0;i <document.form1.elements.length;i++)  {
            var   e=document.form1.elements[i];
                     if(e.checked==false){
                        e.checked=true;
                       }else{
                        e.checked=false;
                      }
         }
    }
    function  theforever(){
    var chks=document.getElementsByName('chks');
    var check_num;
    if(chks.length>0){
    check_num=0;
    for(var i=0;i<chks.length;i++){
    if(chks[i].checked==true) check_num++;
    }
    for(var i=0;i<chks.length;i++){
    chks[i].checked=check_num==chks.length?false:true;
    }
    }
    }
    </script></head>
    <body>
    <form name="form1" >
    <input type="button" name="chkOthers"  onclick="反选()" value="反选"/>
    <br>
    <input type="button" name="chkAll"  onclick="theforever()" value="用这个"/>
    <br>
    <input type="checkbox" name="chks" value="1"/><br/>
    <input type="checkbox" name="chks" value="2"/><br/>
    <input type="checkbox" name="chks" value="3"/><br/>
    <input type="checkbox" name="chks" value="4"/><br/>
    </form>
    </body>
    </html>
      

  4.   

    改了下，效率在微观上能好点
    <META NAME="Author" CONTENT="theforever(碧海情天),赵亮">
    <meta http-equiv="blog" content="blog.csdn.net/theforever">
    <meta http-equiv="email" content="[email protected]">
    <META NAME="Keywords" CONTENT="theforever,csdn,碧海情天,赵亮">
    <script type="text/javascript">
    function chkall(){
        for(var i=0;i <document.form1.elements.length;i++)  {
            var   e=document.form1.elements[i];
                     if(e.checked==false){
                        e.checked=true;
                       }else{
                        e.checked=false;
                      }
         }
    }
    function  theforever(){
    var chks=document.getElementsByName('chks');
    var check_num;
    if(chks.length>0){
    check_num=0;
    for(var i=0;i<chks.length;i++){
    if(chks[i].checked==true) check_num++;
    }
    check_num=!(check_num==chks.length);
    for(var i=0;i<chks.length;i++){
    chks[i].checked=check_num;
    }
    }
    }
    </script></head>
    <body>
    <form name="form1" >
    <input type="button" name="chkOthers"  onclick="反选()" value="反选"/>
    <br>
    <input type="button" name="chkAll"  onclick="theforever()" value="用这个"/>
    <br>
    <input type="checkbox" name="chks" value="1"/><br/>
    <input type="checkbox" name="chks" value="2"/><br/>
    <input type="checkbox" name="chks" value="3"/><br/>
    <input type="checkbox" name="chks" value="4"/><br/>
    </form>
    </body>
    </html>
      

  5.   


    <html>
    <head>
    <script type="text/javascript">function chkall(){
        for(var i=0;i <document.form1.elements.length;i++)  { 
            var   e=document.form1.elements[i]; 
                     if(e.checked==false){
                        e.checked=true;
                       }else{
                        e.checked=false;
                      }
         }
    } var check_flag=true;
    function  chk(){
    var chkall = document.getElementsByName('chks');
    var n = 0;
    for(var i=0;i<chkall.length;i++) if(chkall[i].checked) n++;
    if(n==chkall.length) for(var i=0;i<chkall.length;i++) chkall[i].checked = false;
    else for(var i=0;i<chkall.length;i++) chkall[i].checked = true;
    }</script></head>
    <body>
    <form name="form1" >
    <input type="button" name="chkes"  onclick="chkall()" value="chkall"/>
    <br>
    <input type="button" name="chkesss"  onclick="chk()" value="用这个"/>
    <br>
    <input type="checkbox" name="chks" value="1"/>
    <br/>
    <input type="checkbox" name="chks" value="2"/>
    <br/>
    <input type="checkbox" name="chks" value="3"/>
    <br/>
    <input type="checkbox" name="chks" value="4"/>
    <br/>
    <input type="checkbox" name="chks" value="5"/>
    <br/>
    <input type="checkbox" name="chks" value="6"/>
    <br/>
    <input type="checkbox" name="chks" value="7"/>
    <br/>
    <input type="checkbox" name="chks" value="8"/>
    <br/>
    <input type="checkbox" name="chks" value="9"/>
    <br/></form></body>
    </html>