【成长笔记】html+jqurey全选反选取消--让世界爱上中国造

最新推荐文章于 2024-07-23 23:43:36 发布

xiao_hacker

最新推荐文章于 2024-07-23 23:43:36 发布

阅读量889

点赞数

分类专栏：笔记文章标签： jquery html

本文链接：https://blog.csdn.net/qq_24790545/article/details/104932561

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border="1">
   <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
    </tr>
   </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>乡村教师代言人</td>
        <td>淘宝、阿里、蜂鸟</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>奶茶妹</td>
        <td>商城、金融</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>董老板</td>
        <td>让世界爱上中国选</td>
    </tr>
    </tbody>
</table>
<script src="jquery-3.4.1.js" type="text/javascript"></script>
<script>
    // 点击全选按钮 选中所有的checkbox
    // DOM绑定事件方法
    // $("#all")[0].onclick = function(){}
    // jQuery绑定事件方法
    $("#all").click(function () {
        $(":checkbox").prop('checked', true);
    });
    // 取消
    $("#cancel").on("click", function () {
         $(":checkbox").prop('checked', false);
    });
    // 反选
    $("#reverse").click(function () {
        var $checkbox = $(":checkbox");
        for (var i=0;i<$checkbox.length;i++){
            // 获取原来的选中与否的状态
            var status = $($checkbox[i]).prop('checked');
            $($checkbox[i]).prop('checked', !status);
            //此处取反
        }
    })
</script>
</body>
</html>

二、运行效果

在这里插入图片描述

xiao_hacker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【成长笔记】html+jqurey全选反选取消--让世界爱上中国造

一、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><button id="all">全选</button>...
复制链接

扫一扫

专栏目录