全选全不选反选

Posted 2020-11-27 teoh

<div class="tit">
        你爱好的美食是？
        <form action="">
            <input type="checkbox" name="quan" value="quan" id="quan">全选/全不选 <br>
            <input type="checkbox" name="food" value="火锅">火锅 
            <input type="checkbox" name="food" value="烤肉">烤肉 
            <input type="checkbox" name="food" value="汉堡">汉堡 
            <input type="checkbox" name="food" value="牛排">牛排 
        </form>
        <button class="btn">全选</button>
        <button class="btn1">全不选</button>
        <button class="btn2">反选</button>
        <button class="btn3">提交</button>
    </div>

 var btn = document.querySelector(".btn")
            btn1 = document.querySelector(".btn1")
            btn2 = document.querySelector(".btn2")
            btn3 = document.querySelector(".btn3")
            quan = document.getElementById("quan")
            food = document.getElementsByName("food")
        
        quan.onclick = function(){
            for(var i = 0;i<food.length;i++){
                // if(quan.checked){
                //     food[i].checked = true
                // }else{
                //     food[i].checked = false
                // }
                food[i].checked = this.checked
            }
        }
        for(var i = 0;i<food.length;i++){
            food[i].onclick = function(){
                quan.checked = true;
                for(var j = 0;j<food.length;j++){
                    if(!food[j].checked){
                        quan.checked = false;
                        break;
                    }
                }
            }
        }
        btn.onclick = function(){
            for(var i = 0;i<food.length;i++){
                food[i].checked = true
            }
            quan.checked = true
        }
        btn1.onclick = function(){
            for(var i = 0;i<food.length;i++){
                food[i].checked = false
            }
            quan.checked = false
        }
        btn2.onclick = function(){
            quan.checked = true;
            for(var i = 0;i<food.length;i++){
                food[i].checked = !food[i].checked
                if(!food[i].checked){
                    quan.checked = false;
                }
            }
        }
        btn3.onclick = function(){
            for(var i = 0;i<food.length;i++){
                if(food[i].checked){
                    alert(food[i].value)
                }
            }
        }

效果图：