原生js全选全不选反选--来自尚硅谷JavaScript基础&实战

先看效果

上代码

    <form method="post" action="">
        你爱好的运动是?<input type="checkbox" id="checkAllBox">全选/全不选<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="checkRevBtn" value="反选">
        <input type="button" id="sendBtn" value="提交">    
    </form>
    <script>
        // 全选
        var checkedAllBtn=document.getElementById("checkedAllBtn");
        // 获取四个元素
        var items=document.getElementsByName("items");
            checkedAllBtn.onclick=function(){
                for(var i=0 ; i<items.length ;i++ ){
                    items[i].checked=true;
                }
            }
        // 全不选
        var checkedNoBtn=document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick=function(){
                for(i=0;i<items.length;i++){
                    items[i].checked=false;
                }
            }
        // 反选
        var checkRevBtn=document.getElementById("checkRevBtn");
            checkRevBtn.onclick=function(){
                for(i=0;i<items.length;i++){
                    if(items[i].checked){
                        items[i].checked=false;
                    }else{
                        items[i].checked=true;
                    }
                }
            }
        // 提交：点击按钮后，将所中的复选框的value属性值弹出
        var sendBtn=document.getElementById("sendBtn");    
            sendBtn.onclick=function(){
                for(var i=0;i<items.length;i++){
                    // alert(items[i].value);
                    if(items[i].checked){
                        alert(items[i].value);
                    }
                }
            }
        // 全选/全不选:思路checkAllBox的状态和items相同
        var checkAllBox=document.getElementById("checkAllBox");
            checkAllBox.onclick=function(){
                for(var i=0;i<items.length;i++){
                    items[i].checked=this.checked;
                }
            }
        // 如果items全都选中，则checkedAllBox也应该选中，如果items全都取消checkAllBox也应该取消
        // 为四个复选框设备响应函数
        for(var i=0;i<items.length;i++){
            items[i].onclick=function(){
                // 将checkAllBox设置为选中状态
                checkAllBox.checked=true;
                // 再次循环用来
                for(var j=0;j<items.length;j++){
                    // 判断四个复选框是否全选，只有一个没有选中就不是全选
                    if(!items[j].checked){
                        // 一旦进入判断，则证明不是全选状态，将checkAllBox设置为没选中状态
                        checkAllBox.checked=false;
                    }
                }
            }
        }
    </script>