jQuery学习笔记——表格全选反选功能实例

最新推荐文章于 2020-06-02 13:51:46 发布

Ankry果冻

最新推荐文章于 2020-06-02 13:51:46 发布

阅读量320

点赞数 1

分类专栏： JQuery 文章标签： javascript jquery css

本文链接：https://blog.csdn.net/weixin_41306215/article/details/105761297

版权

这篇博客介绍了如何使用jQuery实现表格中的全选反选功能。点击全选按钮，可使所有复选框被选中；当所有复选框都被选中时，全选按钮自动选中；反之，若有任一复选框未选中，全选按钮取消选中状态。文中重点提到了jQuery 1.6以后对于`checked`属性应用`prop()`方法的注意事项，以及判断所有复选框是否选中的方法。

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

效果：

点击最上面的全选按钮，下面4个checkbox被选中
下面四个按钮都选了则上面的全选按钮自动选上，下面只有一个没选，全选按钮都不选

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格全选反选</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        table{
            width: 300px;
            border-collapse: collapse;
            border: 1px solid #666666;
        }
        thead{
            width: 300px;
            height: 50px;
            color: #fff;
            background: #008dd0;
        }
        thead th,td