javascript的checkbox全选与反选问题


<input type="checkbox" id="qx"/>全选<br/>
<input type="checkbox" name="m1" /><br/>
<input type="checkbox" name="m1" /><br/>
<input type="checkbox" name="m1" /><br/>
<input type="checkbox" name="m1" /><br/>
<input type="checkbox" name="m1" /><br/>
<input type="checkbox" name="m1" /><br/>
<input type="checkbox" name="m1" /><br/>
<input type="checkbox" name="m1" /><br/>
<input type="checkbox" name="m1" /><br/><script type="text/javascript">
window.onload=function()
{
var allip = document.getElementsByTagName("input");
var oqx = document.getElementById("qx");
var oac = document.getElementsByName("m1");
//全选与反选
oqx.onclick=function()
{
for(var k=0; k<oac.length;k++)
{
oac[k].checked=oqx.checked;
}
}

for(var i=0; i<oac.length;i++)
{
var ite = 0;
oac[i].onclick=zo;
function zo()
{
if(this.checked)
{
ite++;
}
if(ite==oac.length&&!oqx.checked)
{
oqx.checked=true;
}
if(ite==0&&oqx.checked)
{
oqx.checked=false;
}

}
}

}</script>
请问我这是什么问题，打开页面，如果把子项全都checked，这时全选的input也变成了checked，但此时如果去掉任意一个checked   全选的input仍然是checked状态？  谁能帮我看看，谢谢

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <script type="text/javascript">
        window.onload=function()
        {
            var allip = document.getElementsByTagName("input");
            var oqx = document.getElementById("qx");
            var oac = document.getElementsByName("m1");
    var sh=document.getElementById("sh");
            //全选与反选
            oqx.onclick=function()
            {
                for(var k=0; k<oac.length;k++)
                {
                    oac[k].checked=oqx.checked;
                }
            }
            
            for(var i=0; i<oac.length;i++)
            {
                var ite = 0;
                oac[i].onclick=zo;
                function zo()
                {
                    if(this.checked)
                    {
                        ite++;
                    }
    if(!this.checked)//add
                    {
                        ite--;
                    }
                    if(ite==oac.length&&!oqx.checked)
                    {
                        oqx.checked=true;
                    }
                    if(ite<oac.length&&oqx.checked)//update
                    {
                        oqx.checked=false;
                    }
                    sh.innerHTML="ite==="+ite;
                }
            }
            
        }</script>
     </HEAD> <BODY>
        <input type="checkbox" id="qx"/>全选<br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <div id="sh">

    </div>
     </BODY>
    </HTML>
      

  2.   


    <script type="text/javascript">
           var x = document.getElementsByName("m1"),
               qxo=document.getElementById("qx");
           qxo.onclick=function(){//全选
               for(var f=0,cou=x.length;f<cou;f++){
                   x[f].checked=true;
                   x[f].onclick=function(){
                       if(!this.checked){//有一个不选中，全选也不选中
                           qxo.checked=false;
                       }
                       
                   }
               }
           }
           
        </script>
      

  3.   

    这个试下可以不？<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <script type="text/javascript">
        window.onload=function()
        {
            var allip = document.getElementsByTagName("input");
            var oqx = document.getElementById("qx");
            var oac = document.getElementsByName("m1");
    var ite = 0;
            //全选与反选
            oqx.onclick=function()
            {
                for(var k=0; k<oac.length;k++)
                {
                    oac[k].checked=oqx.checked;
    oqx.checked?ite=oac.length:ite=0;//add
                }
            }
            for(var i=0; i<oac.length;i++)
            {
                oac[i].onclick=zo;
                function zo()
                {
                    this.checked?ite++:ite--;
                    ite<oac.length?oqx.checked=false:oqx.checked=true;
                }
            }
            
        }</script>
     </HEAD>
     <BODY>
        <input type="checkbox" id="qx"/>全选<br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
    <input type="checkbox" name="m1" /><br/>
     </BODY>
    </HTML>