JavaScript

时间：2022-03-29 01:54

　　Javascript

1、全选、全不选、反选的js实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>全选</button>
    <button>全不选</button>
    <button>反选</button>
    <input type="checkbox">吃
    <input type="checkbox">喝
    <input type="checkbox">玩
    <input type="checkbox"> 乐
    <script type="text/javascript">
        //获取三个button
        var btns = document.querySelectorAll(‘button‘);
        //获取所有复选框内容
        var inputs = document.querySelectorAll(‘input‘);
        btns[0].onclick = function () {
            //循环获取到所有的复选框的input
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }

        };
        btns[1].onclick = function () {
            //
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = false;
            }

        };
        btns[2].onclick = function () {
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked == true ? inputs[i].checked = false : inputs[i].checked = true;
            }
        };

    </script>


</body>

</html>

　　效果图：

技术图片

2、全选、全不选、反选的jquery实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        你爱好的运动是:<input type="checkbox" id="checkAllbox" />全选/全不选
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <br />
        <input type="button" id="checkAll" value="全选" />
        <input type="button" id="checkNo" value="全不选" />
        <input type="button" id="checkRev" value="反选" />
        <input type="button" id="submit" value="提交" />
    </form>
    <script src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var $items = $(‘:checkbox[name=items]‘);
        var $checkAllbox = $(‘#checkAllbox‘);

        $(‘#checkAll‘).click(function () {
            //元素固有属性有prop,自定义属性用attr
            $items.prop(‘checked‘, true);
            $checkAllbox.prop(‘checked‘, true);
        })
        $(‘#checkNo‘).click(function () {
            //元素固有属性有prop,自定义属性用attr
            $items.prop(‘checked‘, false);
            $checkAllbox.prop(‘checked‘, false);
        })
        $(‘#checkRev‘).click(function () {
            //遍历
            $items.each(function () {
                this.checked = !this.checked;
            })
            $checkAllbox.prop(‘checked‘, $items.filter(‘:checked‘).length == $items.length)
            $checkAllbox.prop(‘checked‘, $items.filter(‘:not(:checked)‘).length == 0)
        })

        $checkAllbox.click(function () {
            $items.prop(‘checked‘, this.checked)
        })
        $items.click(function () {
            $checkAllbox.prop(‘checked‘, $items.filter(‘:checked‘).length == $items.length)
        })

    </script>
</body>

</html>