全選反選全不選

<div id="select">
    <input type="checkbox" name="love" id="1">琴
    <input type="checkbox" name="love" id="2">棋
    <input type="checkbox" name="love" id="3">書
    <input type="checkbox" name="love" id="4">畫
</div>

<button id="all">全選</button>
<button id="selected">反選</button>
<button id="allNull">全不選</button>

===============================================

// js代碼

window.onload = function() {
    var select = document.getElementById('select');
    select = select.children;

    //綁定點擊事件
    var all = document.getElementById('all');
    all.onclick = function() {
        for (var i = 0; i < select.length; i++) {
            select[i].checked = true;
        }
    }

    var selected = document.getElementById('selected');
    selected.onclick = function() {
        for (var i = 0; i < select.length; i++) {
            select[i].checked ? select[i].checked = false : select[i].checked = true;
            /*if (select[i].checked) {
            	select[i].checked = false;
            } else {
            	select[i].checked = true;
            }*/
        }
    }

    var allNull = document.getElementById('allNull');
    allNull.onclick = function() {
        for (var i = 0; i < select.length; i++) {
            select[i].checked = false;
        }
    }
}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章