Loading

jQuery实现Checkbox复选框全选、全不选、反选等功能

前段时间使用JavaScript写了一个简易版的Checkbox全选全不选功能
于是最近使用jQuery完善了Checkbox的反选、提交等功能，以下为完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用prop和checked实现复选框全选全不选反选等功能</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 全选按钮功能
            $("#checkedAllBtn").click(function () {
                $(":checkbox").prop("checked", true);
            });

            // 全不选按钮功能
            $("#checkedNoBtn").click(function () {
                $(":checkbox").prop("checked", false);
            });

            // 反选按钮功能
            $("#checkedRevBtn").click(function () {
                $(":checkbox[name='items']").each(function () {
                    // 每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（这里指不同的items复选框）
                    this.checked = !this.checked;
                });
                // 获取所有球类运动选项框的数量
                var allCount = $(":checkbox[name='items']").length;
                // 获取当前球类运动选项框选中的数量
                var checkedCount = $(":checkbox[name='items']:checked").length;
                // 如果复选框选中数量和总数量相同，则将全选/全不选按钮状态随之更改为true/false
                $("#checkedAllNone").prop("checked", allCount === checkedCount);
            });

            // 提交按钮功能
            $("#submitBtn").click(function () {
                // :冒号选择器要紧跟着前面的选择器，不能有空格，不然会失去效果
                $(":checkbox[name='items']:checked").each(function () {
                    // 在事件的function函数中，有一个this对象，这个this对象是当前正在相应的DOM对象（这里指选中的运动）
                    alert(this.value);
                });
            });

            // 全选/全不选按钮功能
            $("#checkedAllNone").click(function () {
                //在事件的function函数中，有一个this对象，这个this对象是当前正在相应的DOM对象（这里指全选/全不选按钮）
                $(":checkbox[name='items']").prop("checked", this.checked);
            });

            // 当所有球类运动复选框都被选中时，全选按钮同时更改为被选中状态
            $(":checkbox[name='items']").click(function () {
                // 获取所有球类运动选项框的数量
                var allCount = $(":checkbox[name='items']").length;
                // 获取当前球类运动选项框选中的数量
                var checkedCount = $(":checkbox[name='items']:checked").length;
                $("#checkedAllNone").prop("checked", allCount == checkedCount);
            });
        });
    </script>
</head>
<body>
<div style="width:100%;text-align:center">
<form>
    <span>请选择你喜欢的多项球类运动吧：</span>
    <br><br>
    <input type="checkbox" id="checkedAllNone">全选/全不选
    <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><br>
    <input type="button" id="checkedAllBtn" value="全选">
    &nbsp;
    <input type="button" id="checkedNoBtn" value="全不选">
    &nbsp;
    <input type="button" id="checkedRevBtn" value="反选">
    &nbsp;
    <input type="button" id="submitBtn" value="提交">
</form>
</div>
</body>
</html>
代码运行效果：

posted @ 2021-01-28 20:09  Schieber  阅读(471)  评论(0)  编辑  收藏  举报