用js编写全选/全不选/反选

运行出来的图片：

在html的代码如下：

在这里插入代码片

<form action="" method="post">
    你爱好的运动是？<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="t提交"/>
</form>

在这里插入代码片

	window.onload=function(){
        //获取四个多选框items
        var items=document.getElementsByName("items");

		//全选
        //点击按钮后全选
        var checkedAllBtn=document.getElementById("checkedAllBtn");
        //全选点击按钮
        checkedAllBtn.onclick=function(){
            //获取四个多选框items
            //var items=document.getElementsByName("items");
            //遍历items
            for(var i=0;i<items.length;i++){
                //设置四个多选框变成选中状态
                //通过多选框的checked属性可以来获取或设置多选框的选中状态
                items[i].checked=true;
                
            }
            checkedAllBox.checked=true;
        };
		
		//全不选
        var checkedNoBtn=document.getElementById("checkedNoBtn");
        //全不选点击按钮
        checkedNoBtn.onclick=function(){
            //获取四个多选框items
           // var items=document.getElementsByName("items");
            //遍历items
            for(var i=0;i<items.length;i++){
                //设置四个多选框变成选中状态
                //通过多选框的checked属性可以来获取或设置多选框的选中状态
                items[i].checked=false;
               
            }
            checkedAllBox.checked=false;
        };

	//反选
        var checkedRevBtn=document.getElementById("checkedRevBtn");
         //反选点击按钮后 选中的变成没选中 没选中的变成选中
         checkedRevBtn.onclick=function(){
            //获取四个多选框items
           // var items=document.getElementsByName("items");
            //遍历items
            for(var i=0;i<items.length;i++){                   
                //判断选框的状态
                //items[i].checked=! items[i].checked
                items[i].checked==true?items[i].checked=false:items[i].checked=true;
                 //判断四个多选框是否全选
                //只要有一个没选中则就不是全选
                if(!items[j].checked){
                        //一旦进入判断，则证明不是全选状态
                        //将checkedAllBox设置为没选中状态
                        checkedAllBox.checked=false;                          
                    }
            }              
        };

        //提交按钮 
        var sendBtn=document.getElementById("sendBtn");
         //提交按钮 单击后将所有选中的单选框的value属性值弹出
         sendBtn.onclick=function(){
            //获取四个多选框items
           // var items=document.getElementsByName("items");
            //遍历items
            for(var i=0;i<items.length;i++){ 
                //判断多选框是否选中
                if(items[i].checked){
                    alert(items[i].value)
                }                  
               
            }
        };

        //全选/全不选
        var checkedAllBox=document.getElementById("checkedAllBox");
         //提交按钮 单击后将所有选中的单选框的value属性值弹出
         checkedAllBox.onclick=function(){
            //获取四个多选框items
          //  var items=document.getElementsByName("items");
            //遍历items
            for(var i=0;i<items.length;i++){ 
                //判断多选框是否选中
                items[i].checked=checkedAllBox.checked                   
            }
        };

        //  如果四个多选框全部选中，则checkedAllBox.checked=true;
         //  如果四个多选框全部不选中，则checkedAllBox.checked=false;
         //为四个多选框绑定点击响应事件
         for(var i=0;i<items.length;i++){
              
             items[i].onclick=function(){
                 //将checkedAllBox设置为选中状态
                checkedAllBox.checked=true;
                for(var j=0;j<items.length;j++){
                     //判断四个多选框是否全选
                     //只要有一个没选中则就不是全选
                    if(!items[j].checked){
                        //一旦进入判断，则证明不是全选状态
                        //将checkedAllBox设置为没选中状态
                        checkedAllBox.checked=false;

                        //一旦进入判断 则已经得出结果，不用再继续执行循环
                        break;
                    }
                }                                       
             }
         }
    }