原生JavaScript练习——全选

HTML：

    <label ><input id="all" type="checkbox">全选</label>
    <hr>
    <input type="checkbox">魅族<br>
    <input type="checkbox">小米<br>
    <input type="checkbox">华为<br>
    <input type="checkbox">一加<br>
    <input type="checkbox">苹果<br>
    <input type="checkbox">三星<br>
    <input type="checkbox">努比亚<br>
    <input type="checkbox">OPPO<br>
    <input type="checkbox">Vivo<br>

Javasript：

window.onload = function () {
// 获取全选按钮
            var all = document.getElementById('all');
// 添加点击事件
            all.onclick = function () {
                var boxs = document.getElementsByTagName('input');
// 遍历所有input标签
                for(var i = 0 ; i < boxs.length ; i++){
// 使全选按钮的选中状态与其他所有input标签状态一致
                    boxs[i].checked = all.checked;
                }
            }
        }

 

转载于:https://www.cnblogs.com/luohaoran/p/5919455.html