JQuery 实现复选框的全选、反选、全不选

最新推荐文章于 2022-03-23 22:03:57 发布

冷眸丶杵

最新推荐文章于 2022-03-23 22:03:57 发布

阅读量2.3k

点赞数 2

分类专栏： jQuery

本文链接：https://blog.csdn.net/LY9457/article/details/80845244

版权

jQuery 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

添加多个复选框，三个按钮，再用JQuery为其添加单击事件

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Scripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            $(".check_all").click(function () {
                //设置复选框 checked为true 为选中
                $("input[type='checkbox']").prop("checked", true);
            });

            $(".Invert_Selection").click(function () {

                $("input[type='checkbox']").each(function () {
                    //当前被选中的事件等于当前未被选中的事件
                    this.checked = !this.checked;
                })
            });
            $(".not_check_all").click(function () {
                //设置复选框 checked为true 为全不选
                $("input[type='checkbox']").prop("checked", false);
            });
            
        });
    </script>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <input type="checkbox" />龙
        <input type="checkbox" />凤
        <input type="checkbox" />饕餮
        <input type="checkbox" />鸾凤
    </div>
    <div>
        <input type="button" class="check_all" value="全选" />
        <input type="button" class="Invert_Selection" value="反选" />
        <input type="button" class="not_check_all" value="全不选" />
    </div>
</body>
</html>

初始效果如图：

点击全选效果如图：

全不选效果如图：——取消之前选中的

选中一个复选框，再点击反选，效果如图：

以上就是全部内容了！

冷眸丶杵

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JQuery 实现复选框的全选、反选、全不选

添加多个复选框，三个按钮，再用JQuery为其添加单击事件&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;script src="Scripts/jquery-1
复制链接

扫一扫

专栏目录