2021-05-18

JS点击按钮实现全选与取消全选（基础版）

HTML

    <ul>
        <li>
            <input type="checkbox">vip1</li>
        <li>
            <input type="checkbox">vip2</li>
        <li>
            <input type="checkbox">vip3</li>
        <li>
            <input type="checkbox">vip4</li>
        <li>
            <input type="checkbox">vip5</li>
    </ul>
    <button type="button">全选</button>
    <button type="button" id="btn1">取消全选</button>

Script

    <script>
        //获取每一个复选框分值
        var box = document.querySelectorAll('input');
        //获取按钮的值
        var btn = document.querySelector('button');
        //绑定点击事件
        btn.onclick = function () {
            //遍历获到的值,多个值时一个数组
            box.forEach(function (v, i) {
                //console.log(v);打印看看
                v.checked = true;//点击全选
            });
        }

        //获取第二个按钮的值
        var btn1=document.querySelector('#btn1')
        
        //点击事件
        btn1.onclick=function(){
            box.forEach(function(v,i){
                //点击取消全选
                v.checked=false;
            });
        }
    </script>

last