jQuery实现全选，反选，取消操作

最新推荐文章于 2022-09-23 14:49:25 发布

我的大男子主义

最新推荐文章于 2022-09-23 14:49:25 发布

阅读量1.9k

点赞数

分类专栏： web前端文章标签： jQuery

本文链接：https://blog.csdn.net/lf1949/article/details/123781654

版权

web前端专栏收录该内容

13 篇文章 5 订阅

订阅专栏

jQuery全选、反选、取消

题目
代码展示

题目

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="jQuery/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
            //全选
            $(".all").click(function (){
                $(".check").prop("checked",true);
            });
            //反选
            $("#btn_not").click(function (){
                $(".check").each(function (){
                    var flag=$(this).prop("checked");

                    $(this).prop("checked",!flag);
                });
            })
            //取消(移除全选事件）
            $("#btn_defeat").click(function (){
                $("#btn_all").off("click");
            })
        });
    </script>

</head>
<body>
<div>
    <input type="button" value="全选" id="btn_all" class="all"/>
    <input type="button" value="反选" id="btn_not" class="not"/>
    <input type="button" value="取消" id="btn_defeat" class="defeat"/>
    <table border="1">
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>爱好</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="check" id="check1" /> </td>
            <td>郭德纲</td>
            <td>开车，京剧</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="check" id="check2"/> </td>
            <td>岳云鹏</td>
            <td>做饭</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="check" id="check3"/> </td>
            <td>于谦</td>
            <td>抽烟，喝酒，烫头</td>
        </tr>
    </table>
</div>
</body>
</html>

实话实说，这道题我没太理解取消的作用到底是啥，我理解为移除事件，我对我的理解不是十分肯定，所以，评论区等待大家的建议

我的大男子主义

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery实现全选，反选，取消操作

jQuery全选、反选、取消题目代码展示题目代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jQuery/jquery-3.6.0.min.js"></script> <script> $(func
复制链接

扫一扫