jquery实现表格的全选复选框功能1

再※见了＆单纯，！

已于 2022-04-16 19:47:02 修改

阅读量1.7k

点赞数 1

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

于 2022-03-16 11:08:47 首次发布

本文链接：https://blog.csdn.net/qq_44732752/article/details/123520844

版权

该博客介绍了如何利用jQuery来实现表格中的全选复选框功能。首先展示了实现后的效果图，接着在HTML部分创建了表格及复选框结构，并通过CSS进行了样式设置。然后在JS部分编写了jQuery代码，实现当全选复选框被选中时，所有行的复选框也会被选中，反之则取消选中。

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

在这里插入图片描述效果图

html + css

<style>
    .red {
     
        color: red;
    }

    .tab-title {
     
        width: 100%;
        height: 40px;
        padding-bottom: 8px;
        display: flex;
    }

    .tckc {
     
        background-color: #4CAF50;
    }

    .tab-title span {
     
        line-height: 40px;
        width: 49%;
        text-align: center;
        font-size: 18PX;
        font-weight: bold;
        color: #fff;
    }

    .kecheng-tc {
     
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .pagination {
     
        display: inline-block;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin: 20px auto;
    }

    .pagination a {
     
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
    }

    .pagination a.active {
     
        background-color: #4CAF50;
        color: white;
        border-radius: 5px;
    }

    .pagination a:hover:not(.active) {
     
        background-color: #ddd;
        border-radius: 5px;
    }

    .gwtj {
     
        position: fixed;
        bottom: 0;
        left: 50%;
        padding: 7px;
        font-size: 16px;
        transform: translateX(-50%);
        background-image: -webkit-linear-gradient(45deg, #3BD4C1, #119BD2);
        background-image: linear-gradient(45deg, #3BD4C1, #119BD2);
        z-index: 101;
        border: 1px solid #f5f5f5;
    }

    .bgRed {
     
        background: #F1F1F1;
    }

    table tbody {
     
        width: 1180px;
        display: block;
        height: 80px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .kctc-table tbody {
     
        width: 1180px;
        height: 500px;
        background-color: #fff;
        color: #666;
        overflow-y: scroll;
    }

    .kctc-table tbody tr {
     
        width: 1180px;
        display: flex;
    }

    .kctc-table td {
     
        flex: 1;
        border: 1px solid #f5f5f5;
        min-height: 40px;
        line-height: 40px;
        font-size: 15px;
        color: #666;
    }

    .kctc-table tr td:nth-child(2) {
     
        flex: 4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .gw-uls {
     
        display: flex;
        width: 98%;
        flex-wrap: wrap;
        margin: auto;