js基础_61、全选练习

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                //定义一个单击响应函数
                var myClick=function(nodeid,fun){
                    var nownode=document.getElementById(nodeid);
                    nownode.onclick=fun;
                }
                //给复选框绑定事件
                var items=document.getElementsByName("items");
                var allbtn=document.getElementById("checkedAllBox");
                for (var i=0;i<items.length;i++) {
                        items[i].onclick=function(){
                            var statearray=document.getElementsByName("items");
                            allbtn.checked=true;
                            for (var i=0;i<statearray.length;i++) {
                                if(!statearray[i].checked){
                                    allbtn.checked=false;
                                    break;
                                }
                            }
                        };
                }
                //给全选复选框绑定事件
                myClick("checkedAllBox",function(){
                    var itemarray=document.getElementsByName("items");
                    //alert(this);
                    for (var i=0;i<itemarray.length;i++) {
                        itemarray[i].checked=this.checked;
                    }                
                })
                //给全选按钮绑定事件
                myClick('checkedAllBtn',function(){
                    var itemarray=document.getElementsByName("items");
                    for (var i=0;i<itemarray.length;i++) {
                        itemarray[i].checked=true;
                    }
                    document.getElementById("checkedAllBox").checked=true;
                })
                //给全不选按钮绑定事件
                myClick('checkedNoBtn',function(){
                    var itemarray=document.getElementsByName("items");
                    for (var i=0;i<itemarray.length;i++) {
                        itemarray[i].checked=false;
                    }
                    document.getElementById("checkedAllBox").checked=false;
                })
                //给反选按钮绑定事件
                myClick('checkedRevBtn',function(){
                    var itemarray=document.getElementsByName("items");
                    var state=true;
                    for (var i=0;i<itemarray.length;i++) {
                        itemarray[i].checked=!itemarray[i].checked;
                        if (!itemarray[i].checked) {
                            state=false;
                        }
                    }
                    if(state){
                        document.getElementById("checkedAllBox").checked=true;
                    }else{
                        document.getElementById("checkedAllBox").checked=false;
                    }
                });
                //给提交按钮绑定事件
                myClick('sendBtn',function(){
                    var itemarray=document.getElementsByName("items");
                    var jgtext="";
                    for (var i=0;i<itemarray.length;i++) {
                        if(itemarray[i].checked){
                            jgtext+=itemarray[i].value+" ";
                        }
                    }
                    if(jgtext ==""){
                        alert("没有选择任何选项");
                        return;
                    } 
                    alert(jgtext);
                })
            }
        </script>
    </head>
    <body>
        <form method="post" action="">
            你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
            <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 />
            <input type="button" id="checkedAllBtn" value="全　选" />
            <input type="button" id="checkedNoBtn" value="全不选" />
            <input type="button" id="checkedRevBtn" value="反　选" />
            <input type="button" id="sendBtn" value="提　交" />
        </form>
    </body>
</html>