使用js实现全选按钮练习

html

 <form 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="checkedNoneallbtn" value="全不选">
        <input type="button" id="checkedRevbtn" value="反选">
        <input type="button" id="Sendbtn" value="提交">
    </form>

js

 <script type="text/javascript">
        window.onload = function fun() {
            //获取items
            var items = document.getElementsByName("items");
            //获取全选按钮
            var checkedallbtn = document.getElementById("checkedallbtn");
            checkedallbtn.onclick = function(){
                //遍历items
                for(var i=0; i<items.length; i++){
                    items[i].checked = true;
                    checkedAllbox.checked = true;
                }
            }

             //获取全不选按钮
             var checkedNoneallbtn = document.getElementById("checkedNoneallbtn");
             checkedNoneallbtn.onclick = function(){
                //遍历items
                for(var i=0; i<items.length; i++){
                    items[i].checked = false;
                    checkedAllbox.checked = false;
                }
            }

            
             //获取反选按钮
             var checkedRevbtn = document.getElementById("checkedRevbtn");
             checkedRevbtn.onclick = function(){
                checkedAllbox.checked = true;
                //遍历items
                for(var i=0; i<items.length; i++){
                    items[i].checked =! items[i].checked;
                    
                    if(!items[i].checked){
                        checkedAllbox.checked = false;
                         // break;
                    } 
                }
            }

             //获取提交按钮
             var Sendbtn = document.getElementById("Sendbtn");
             Sendbtn.onclick = function(){
                //遍历items
                for(var i=0; i<items.length; i++){
                    if(items[i].checked){
                        alert(items[i].value);
                    }
                }             
            }

             //获取全选/全不选按钮
             //在事件的响应函数中，响应函数给谁绑定的，谁就是this
             var checkedAllbox = document.getElementById("checkedAllbox");
             checkedAllbox.onclick = function(){
                //遍历items,并设置多选框状态
                for(var i=0; i<items.length; i++){
                    items[i].checked = this.checked;
                }             
            }
            for(var i=0; i<items.length; i++){
                //给每一个单选框设置响应函数
                items[i].onclick = function(){
                    checkedAllbox.checked = true;
                    for(var j=0; j<items.length; j++){
                        if(!items[j].checked){
                            checkedAllbox.checked = false;
                            break;
                        } 
                    }
                }  
            }
        }
    </script>

就不拍视频展示了