T O P

[资源分享]     jQuery实现Checkbox复选框全选、全不选、反选等功能

  • By - 楼主

  • 2021-02-01 14:32:54
  • 前段时间使用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>
    
    代码运行效果:

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册