JS / JQ 简单实现 checkbox 全选功能

实现全选功能有两个方面需要注意：

1 当修改全选选框的 checked 状态时，会同步修改其他选框的 checked 状态

2 当其他选框的 checked 状态都为 true 时，此时全选选框的checked状态必须为 true

效果：

原生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>
    <!-- 使用style修改样式 -->
    <style>
        .select_normal {
            list-style: none;
            background-color: rgb(245, 245, 245);
            width: 200px;
            padding: 10px;
        }

        li:nth-child(1) {
            background-color: thistle;
        }

        .select_over {
            background-color: rgb(199, 199, 199);
        }
    </style>
</head>

<body>
    <ul>
        <li class="select_normal">
            <label>全选</label>
            <input id="allSelect" type="checkbox">
        </li>
        <li class="select_normal">
            数学
            <input class="select" type="checkbox">
        </li>
        <li class="select_normal">
            英语
            <input class="select" type="checkbox">
        </li>
        <li class="select_normal">
            语文
            <input class="select" type="checkbox">
        </li>
        <li class="select_normal">
            化学
            <input class="select" type="checkbox">
        </li>
        <li class="select_normal">
            生物
            <input class="select" type="checkbox">
        </li>
    </ul>
    <script>
        var checkboxList = document.querySelectorAll('.select');
        var allSelect = document.querySelector('#allSelect');
        var liArr = document.querySelectorAll('li');
        allSelect.onclick = function () {
            for (var i = 0; i < checkboxList.length; i++) {
                checkboxList[i].checked = allSelect.checked;
            }
        }
        for (var j = 0; j < checkboxList.length; j++) {
            checkboxList[j].onclick = function () {
                var flag = true;
                for (var k = 0; k < checkboxList.length; k++) {
                    if (checkboxList[k].checked != true) {
                        flag = false;
                        break;
                    }
                }
                allSelect.checked = flag;
            }
        }
        for (var m = 1; m < liArr.length; m++) {
            liArr[m].onmouseover = function () {
                this.className = 'select_over select_normal'
            }
            liArr[m].onmouseout = function () {
                this.className = 'select_normal'
            }
        }
    </script>
</body>

</html>

JQ实现代码（需要引入JQ文件）：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用style修改样式 -->
    <style>
        .select_normal {
            list-style: none;
            background-color: rgb(245, 245, 245);
            width: 200px;
            padding: 10px;
        }

        li:nth-child(1) {
            background-color: thistle;
        }

        .select_over {
            background-color: rgb(199, 199, 199);
        }
    </style>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <ul>
        <li class="select_normal">
            <label>全选</label>
            <input id="allSelect" type="checkbox">
        </li>
        <li class="select_normal">
            数学
            <input class="select" type="checkbox">
        </li>
        <li class="select_normal">
            英语
            <input class="select" type="checkbox">
        </li>
        <li class="select_normal">
            语文
            <input class="select" type="checkbox">
        </li>
        <li class="select_normal">
            化学
            <input class="select" type="checkbox">
        </li>
        <li class="select_normal">
            生物
            <input class="select" type="checkbox">
        </li>
    </ul>
    <script>
        // var checkboxList = document.querySelectorAll('.select');
        // var allSelect = document.querySelector('#allSelect');
        // var liArr = document.querySelectorAll('li');
        // allSelect.onclick = function () {
        //     for (var i = 0; i < checkboxList.length; i++) {
        //         checkboxList[i].checked = allSelect.checked;
        //     }
        // }
        // for (var j = 0; j < checkboxList.length; j++) {
        //     checkboxList[j].onclick = function () {
        //         var flag = true;
        //         for (var k = 0; k < checkboxList.length; k++) {
        //             if (checkboxList[k].checked != true) {
        //                 flag = false;
        //                 break;
        //             }
        //         }
        //         allSelect.checked = flag;
        //     }
        // }
        // for (var m = 1; m < liArr.length; m++) {
        //     liArr[m].onmouseover = function () {
        //         this.className = 'select_over select_normal'
        //     }
        //     liArr[m].onmouseout = function () {
        //         this.className = 'select_normal'
        //     }
        // }
        $(function () {
            $('#allSelect').click(function () {
                $('.select').prop('checked', $(this).prop('checked'));
            });
            $('.select').click(function () {
                var flag = true;
                $('.select').each(function () {
                    if ($(this).prop('checked') != true) {
                        flag = false;
                    }
                })
                $('#allSelect').prop('checked', flag);
            });
            $('li').hover(function () {
                $(this).toggleClass('select_over');
            })
        })
    </script>
</body>

</html>

JS / JQ 简单实现 checkbox 全选功能

猜你喜欢