js点击实现全选、反选

效果图展示

 

HTML

     <div>

        <button>全选</button><button>反选</button><button>不选</button>

    </div>

    <input type="checkbox" name="" id="">吃饭

    <input type="checkbox" name="" id="">睡觉

    <input type="checkbox" name="" id="">刷抖音

    <input type="checkbox" name="" id="">看最右

    <input type="checkbox" name="" id="">刷微博

    <input type="checkbox" name="" id="">打游戏

    <input type="checkbox" name="" id="">喝奶茶

    <input type="checkbox" name="" id="">写代码

js代码

        // 获取元素

        var btns = document.getElementsByTagName('button');

        var input = document.getElementsByTagName('input');

        // 全选

        btns[0].onclick = function () {

            for (var i = 0; i < input.length; i++) {

                    input[i].checked = true;

            }

        }

        // 反选

        btns[1].onclick = function () {

            for (var i = 0; i < input.length; i++) {

                if (input[i].checked == true) {

                    input[i].checked = false;

                }else{

                    input[i].checked = true;

                }

            }

        }

        // 不选

        btns[2].onclick = function () {

            for (var i = 0; i < input.length; i++) {

                    input[i].checked = false;

            }

        }