前端小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，僅供交流學習，若是你喜歡的話，但願能點個贊哦