全选之自学js系列

{
/此处idstr不加引号/
function myclick(idstr,fun) {
var btn1=document.getElementById(“idstr”);
btn1.οnclick=fun;
}

    /* var items=document.getElementsByName("items");
    myclick("qx",
    function(){
          for(var i=0;i<=items.length;i++)
             items[i].checked=true;
           }
    ) */

    /*从此以下成功*/
    var items=document.getElementsByName("items");
    var qx=document.getElementById("qx");
    var sxxz=document.getElementById("sxxz");
    sxxz.onclick=function(){        /*用于设置单击 全选/全不选时各items的状态,实际操作与qx，qxqx一样。for里直接复制即可*/
        if(!sxxz.checked)  
        for(var i=0;i<=items.length;i++)
             items[i].checked=false;
        else if(sxxz.checked)
        for(var i=0;i<=items.length;i++)
             items[i].checked=true;
    }
    qx.onclick=function(){
    sxxz.checked=true;/*在单击和取消单击时为最上方的全选/全不选设定checked*/
        for(var i=0;i<=items.length;i++)
             items[i].checked=true;
           }
    var qxqx=document.getElementById("qxqx");
    qxqx.onclick=function(){
     sxxz.checked=false;
        for(var i=0;i<=items.length;i++)
             items[i].checked=false;
           }
    var fx=document.getElementById("fx");
    fx.onclick=function(){
                sxxz.checked=true;/*默认选中在最上方*/
        for(var i=0;i<=items.length;i++)
            {items[i].checked=!items[i].checked; /*遍历值取反*/
        /* if(items[i].checked) items[i].checked=false;
        else items[i].checked=true; */
        /*通过if else 实现取反效果*/
            if(!items[i].checked) {sxxz.checked=false;}
            /*注意此处上来默认4个items均为选中，若有一个items.checked为flase，则将sxxz.checked设置为false,一定注意单词拼写，false不执行！*/
            }
    
    }
    var submit=document.getElementById("submit");
    submit.onclick=function(){
        for(var i=0;i<=items.length;i++)
        if(items[i].checked)
        alert(items[i].value);/*items以name绑定，判断.checked为ture时，弹出其内容，即为绑定生成的数组中各自对应的value*/
    }       
  /*当submit.onclick少后面的括号，自动与script内的window.onload的最后一个括号匹配，window.onload少最后一个括号，预先加载的（window.onload内的）全部没用了*/
    
    /*注意此时getelmentsbyname获取不到，单个用id，多个组就用name*/
    /* ---------------------------------------------------------------------------------------------------------------------------- */
     /* ---------------------------------------------------------------------------------------------------------------------------- */
   /*  var sxxz=document.getElementById("sxxz");
        sxxz.onclick=function(){                                       初次自己写的
           for(var i=0;i<=items.length;i++)
           if(sxxz.checked) items[i].checked=true;
           else items[i].checked=false;
           items[i].checked=sxxz.checked;
    }
    items.onclick=function(){
        for(var i=0,m=0,k=0;i<=items.length;i++)
        {if(items[i].checked==true) m++;
            else k++;
        }
        if(m==items.length) {sxxz.checked=true;alert("全部都选中了哟"); }
            else if(k==items.length)  {sxxz.checked=false;alert("全部没选中哟"); }
    } */

/* ---------------------------------------------------------------------------------------------------------------------------- /
/ ---------------------------------------------------------------------------------------------------------------------------- /
/ 为items中的每一个复选框绑定单击响应，并与上面sxxz实现关联。 */

    /* for(var i=0;i<=items.length;i++)
    { items[i].onclick=function(){
    sxxz.checked=true;
     for(var j=0;j<=items.length;j++)
      if(!items[j].checked) {sxxz.checked=false;break;}
       }
    } */

/* --------------------------------------------------------------------------------------------自做以下-------------------------------- */
for(var i=0;i<=items.length;i++)
{ items[i].οnclick=function(){
sxxz.checked=true;
for(var j=0;j<=items.length;j++)
if(!items[j].checked) {sxxz.checked=false;break;}
/注意此处上来默认4个items均为选中，若有一个items.checked为flase，则将sxxz.checked设置为false,一定注意单词拼写，false不执行！/
}
}

}
</script>

你爱好的运动是 全选/全不选

足球 篮球 羽毛球 乒乓球
全选 取消全选 反选 提交