全选练习

结构部分：

<div id="container">
        <p>你爱好的运动是？</p>
        <input type="checkbox" name="aon" id="aon" value="全选/全不选">全选/全不选<br>
        <input type="checkbox" name="hobby" id="football" value="足球">足球
        <input type="checkbox" name="hobby" id="basketball" value="篮球">篮球
        <input type="checkbox" name="hobby" id="badminton" value="羽毛球">羽毛球
        <input type="checkbox" name="hobby" id="pingpong" value="乒乓球">乒乓球<br>
        <button id="all">全选</button>
        <button id="not">全不选</button>
        <button id="reverse">反选</button>
        <button id="sub">提交</button>
    </div>

js部分：

 // 全选
        var all=document.getElementById("all");
        var hobby=document.getElementsByName("hobby");
        var aon=document.getElementById("aon");
        all.onclick=function(){
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked=true;
            }
            aon.checked=true;
        }
        // 全不选
        var not=document.getElementById("not");
        not.onclick=function(){
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked=false;
            }
            aon.checked=false;
        }
        // 反选
        var reverse=document.getElementById("reverse");
        reverse.onclick=function(){
            aon.checked=true;
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked=!hobby[i].checked;
                if(!hobby[i].checked){
                    aon.checked=false;
                }
            }
        }
        // 全选/全不选
        aon.onclick=function(){
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked=this.checked;
            }
        }
        // 四个都选中的话全选/全不选也选中
        for(var i=0;i<hobby.length;i++){
            hobby[i].onclick=function(){
                aon.checked=true;
                for(var j=0;j<hobby.length;j++){
                    if(!hobby[j].checked){
                        aon.checked=false;
                        break;
                    }
                }
            }
        }
        // 提交
        var sub=document.getElementById("sub");
        sub.onclick=function(){
            for(var i=0;i<hobby.length;i++){
                if(hobby[i].checked){
                    alert(hobby[i].value)
                }
            }
        }