jQuery-全选按钮效果

最新推荐文章于 2024-04-17 09:12:12 发布

零OO

最新推荐文章于 2024-04-17 09:12:12 发布

阅读量613

点赞数 1

分类专栏：前端文章标签： jquery 前端 html

本文链接：https://blog.csdn.net/qq_39111074/article/details/120704036

版权

前端专栏收录该内容

223 篇文章 8 订阅

订阅专栏

这篇博客介绍了如何使用jQuery实现全选与反选的功能。通过监听全选按钮的change事件，动态同步所有小按钮的状态。同时，当所有小按钮被选中时，全选按钮自动变为选中状态，反之则变为未选中。提供的代码示例清晰地展示了这一过程。

摘要由CSDN通过智能技术生成

页面效果：

全选按钮.gif

实现思路：

将全选按钮checkall的状态赋值给小按钮、以及其他的全选按钮
① 获取全选按钮对象，使用change()函数，每次按钮状态改变就执行该函数
② 获取当前点击的全选按钮的 “checked” 属性值，改属性是标签的自带属性，所以用prop()获取- - -$(this).prop(“checked”)
③ 获取小按钮对象以及其他全选按钮对象，将其 “checked” 属性值设置为全选按钮的 “checked” 属性值
当所有小按钮全部选中时，将全选按钮的状态设置为选中，只要有没选上的，就设置全选按钮状态为false
① 获取被选中的复选框个数- - - $(" . 小按钮 c l a s s 名 : c h e c k e d ") . l e n g t h ② 获取总的小按钮个数 - - -$ (".小按钮class名").length
③ 当选中的个数等于总个数，设置全选按钮的 “checked” 属性值为 true，选中状态；否则，就是没有全部选中，设置全选按钮的 “checked” 属性值为 false

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 300px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="content">
        <div>
            <input type="checkbox" class="checkall">全选
        </div>
        <ul>
            <li>
                <input type="checkbox" class="j-checkbox">苹果
            </li>
            <li>
                <input type="checkbox" class="j-checkbox">香蕉
            </li>
            <li>
                <input type="checkbox" class="j-checkbox">芒果
            </li>
            <li>
                <input type="checkbox" class="j-checkbox">榴莲
            </li>
            <li>
                <input type="checkbox" class="j-checkbox">火龙果
            </li>
            <li>
                <input type="checkbox" class="j-checkbox">橙子
            </li>
        </ul>
        <div>
            <input type="checkbox" class="checkall">全选
            <a href="#">删除选中商品</a>
        </div>
    </div>
    <script src="js/jQuery.min.js"></script>
    <script>
        $(function() {
            $(".checkall").change(function() {
                $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
            });
            $(".j-checkbox").change(function() {
                if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
                    $(".checkall").prop("checked", true);
                } else {
                    $(".checkall").prop("checked", false);
                }
            })
        });
    </script>
</body>
</html>