Front-end small demo native JS solution checkbox full selection anti selection

Js implement checkbox full selection reverse selection

The HTML code

<button id="all"</button id= <button id="no"</button> <button id="reverse"</button> <h3> <inputtype="checkbox"< input > footballtype="checkbox"< input > basketballtype="checkbox"Baseball < > inputtype="checkbox"> footballCopy the code

Js code

var all = document.getElementById("all");
var no = document.getElementById("no");
var reverse = document.getElementById("reverse");
var input = document.getElementsByTagName("input");
all.onclick = function() {for(let i=0; i<input.length; i++){
        input[i].checked = true;
    }
}
no.onclick = function() {for(let i=0; i<input.length; i++){
        input[i].checked = false;
    }
}
reverse.onclick = function() {for(let i=0; i<input.length; i++){
        // input[i].checked = (input[i].checked==true)?false:true;
        input[i].checked = !input[i].checked;
    }
}
Copy the code

Attached: front-end small demo series will continue to update, this series will tend to be more basic demo, only for exchange and learning, if you like it, I hope to point a like oh