前端小demo之原生js解决checkbox全选反选

js实现checkbox全选反选

html代码

<button id="all">选中全部的</button>
<button id="no">不选</button>
<button id="reverse">反选</button>
<h3>选择爱好</h3>
<input type="checkbox">足球
<input type="checkbox">篮球
<input type="checkbox">棒球
<input type="checkbox">橄榄球
复制代码

js代码

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;
    }
}
复制代码

---

附：前端小demo系列会持续更新，这个系列会倾向于比较基础的demo，仅供交流学习，若是你喜欢的话，但愿能点个赞哦