切换选中

Posted 2021-09-19 星屿H

 需求： 切换选中

        1.1 点击全选按钮 将每一个复选框的状态都变成选中

        1.2 点击不选按钮 将每一个复选框的状态都变成不选中

        1.3 点击反选按钮 将选中的复选框变成不选中 将不选中的变成选中

代码实现：

  // 1、获取元素

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

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

        console.log(btns, inps);

        // 2、点击事件 点击全选按钮

        btns[0].onclick = function () {
            // 3、每一个复选框

            for (var i = 0; i < inps.length; i++) {
                console.log(inps[i]);

                // 4、复选框的状态都变成选中

                inps[i].checked = true;

            }

        }

        // 2、点击事件 点击反选按钮

        btns[1].onclick = function () {
            // 3、每一个复选框

            for (var i = 0; i < inps.length; i++) {
                // 判断 如果是选中 就变为不选中 如果是不选中 就变为选中

                //    if(inps[i].checked == true){
                //        inps[i].checked = false;

                //    }else{
                //        inps[i].checked = true;

                //    }

                inps[i].checked = !inps[i].checked;

            }

        }

        // 2、点击事件 点击不选按钮

        btns[2].onclick = function () {
            // 3、每一个复选框

            for (var i = 0; i < inps.length; i++) {
                // 4、复选框的状态都变成不选中

                inps[i].checked = false;

            }

        }