全选练习（一）

getElementsByName，取反练习

基本代码：

 </script>
    window.onload=function() {
        function myClick (idStr , fun){
            var btn =document.getElementById(idStr);
            btn.onclick =fun;
        }
        myClick("all", function(){
            var all=document.getElementsByName("items");
            for(var i =0; i<all.length;i++){
                all[i].checked=!all[i].checked;
            }
        })
        myClick("nothing", function(){
            var nothing=document.getElementsByName("items");
            for(var i =0; i<nothing.length;i++){
                nothing[i].checked=false;
            }
        })
       myClick("recover", function(){
            for(var i =0; i<items.length;i++){
                items[i].checked=!items[i].checked;
            }
        })
    }
</script>

 <div>
    你爱好的运动是？
    <input  type="checkbox" id="chosen"/>全选/全不选
    <br/>
    <input  type="checkbox" name="items" value="瑜伽"/>瑜伽
    <input  type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input  type="checkbox" name="items" value="排球"/>排球
    <input  type="checkbox" name="items" value="篮球"/>篮球
    <br/>
    <br/>
    <input  type="button" id="all" value="全选"/>全选
    <input  type="button" id="nothing" value="全不选"/>全不选
    <input  type="button" id="recover" value="反选"/>反选
    <input  type="button" id="commit" value="提交"/>提交
  </div>

由于 var **=document.getElementsByName("items");每个单击响应函数都会用到，可以将其提取卫公共的部分，代码改造如下：

 <script>
    window.onload=function() {
        function myClick (idStr , fun){
            var btn =document.getElementById(idStr);
            btn.onclick =fun;
        }
        var items=document.getElementsByName("items");

        myClick("all", function(){ 
            for(var i =0; i<items.length;i++){
                items[i].checked=true;
            }
        })
        myClick("nothing", function(){    
            for(var i =0; i<items.length;i++){
                items[i].checked=false;
            }
        })
        myClick("recover", function(){
            for(var i =0; i<items.length;i++){
                items[i].checked=!items[i].checked;
            }
        })
    }
</script>