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

再※见了＆单纯，！

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

阅读量1.7k

点赞数 1

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

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

本文链接：https://blog.youkuaiyun.com/qq_44732752/article/details/123520844

版权

jquery 专栏收录该内容

5 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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;
    }

    .gw-uls li a {
        text-align: center;
        padding: 6px 15px;
        margin: 10px;
        display: block;
        background-color: #F5F5F5;
        border: 1px solid #CBCBCB;
        border-radius: 4px;
        color: #191516;
    }

    .gw-uls li a.on {
        background-color: #4C76E2;
        color: #fff;
    }

    .select {
        background-color: #f5f5f5;
    }
</style>

<body>
    <div class="layui-tab wrapper" style="background-color: #fff;">     
        <!-- 课程套餐 -->
        <h1 class="tab-title tckc" style="margin: 50px auto 0;width: 1200px;">
            <span class="kcnr">
                <b class="fl" style="margin-left: 15px;"><input type="checkbox" class="checkall">&nbsp;全选</b>
                <b class="kecheng-tc">课程套餐</b>
            </span>
        </h1>
        <table class="kctc-table kcnr" style="margin:0 auto 18px;text-align: center;">
            <tbody>
         
                <tr>
                    <td><input type="checkbox" class="check"></td>
                    <td>
                        2021年10月自考03708中国近代史纲要
                    </td>
                    <td>
                        <b style="color: red;">价格：5.99￥</b>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"></td>
                    <td>
                        2021年10月自考03708中国近代史纲要
                    </td>
                    <td>
                        <b style="color: red;">价格：5.99￥</b>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"></td>
                    <td>
                        2021年10月自考03708中国近代史纲要
                    </td>
                    <td>
                        <b style="color: red;">价格：5.99￥</b>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"></td>
                    <td>
                        2021年10月自考03708中国近代史纲要
                    </td>
                    <td>
                        <b style="color: red;">价格：5.99￥</b>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"></td>
                    <td>
                        2021年10月自考03708中国近代史纲要
                    </td>
                    <td>
                        <b style="color: red;">价格：5.99￥</b>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"></td>
                    <td>
                        2021年10月自考03708中国近代史纲要
                    </td>
                    <td>
                        <b style="color: red;">价格：5.99￥</b>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"></td>
                    <td>
                        2021年10月自考03708中国近代史纲要
                    </td>
                    <td>
                        <b class="red">价格：5.99￥</b>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 分页 -->
        <div class="pagination">
            <a href="#">«</a>
            <a href="#">1</a>
            <a href="#" class="active">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
            <a href="#">»</a>
            <a href="#">共1000条</a>
            <a href="#">
                <select name="number" lay-verify="required">
                    <option value="0">10/页</option>
                    <option value="1">20/页</option>
                    <option value="2">30/页</option>
                    <option value="3">40/页</option>

                </select>
            </a>
        </div>
    </div>
</body>

js部分

<script>
    $(function () {
        //全选：点击全选按钮时所有复选框都出于选中状态
        $('.kcnr .checkall').click(function () {
            $('.kcnr .check').prop('checked', this.checked);
        })
        //点击复选框单选 
        $('.kcnr .check').click(function () { 
        	//1.获取表格里复选框的长度          
            let len = $('.kcnr .check').length;
            //2.获取表格里复选框状态为选中状态的长度
            let checked_len = $('.kcnr .check:checked').length;
            /*3.判断选中的复选框长度是否等于复选框的总长度，
            如果相等就将全选框改为选中状态*/
            if (len == checked_len) {
                $('.kcnr .checkall').prop('checked', true)
            } else {
                $('.kcnr .checkall').prop('checked', false)
            }
            //阻止点击复选框点击事件冒泡
            event.stopPropagation();  
        })
        //点击td触发复选框 :如果你想单击一行选中，把下面这个函数里的td改为tr即可
        $(function () {
            $(".kcnr td").click(function () {
            	//1.找到td下面的所有复选框
                var input = $(this).find("input[type=checkbox]"); //获取checkbox               
                //2.获取当前点击的td下面的checkbox是否为选中状态----isChecked 
                var isChecked = $(this).find("input[type=checkbox]").prop('checked');
                /*3.如果isChecked为false，则在点击之后改为true，
                如果isChecked为true，则在点击之后改为false，*/
                if (isChecked == false) {
                    $(this).find("input[type=checkbox]").prop('checked', true);
                } else {
                    $(this).find("input[type=checkbox]").prop('checked', false);
                }
				//4.获取表格里复选框的长度
                let len = $('.kcnr .check').length;
                //5.获取表格里复选框状态为选中状态的长度
                let checked_len = $('.kcnr .check:checked').length;
                /*6.判断选中的复选框长度是否等于复选框的总长度，
            	如果相等就将全选框改为选中状态*/
                if (len == checked_len) {
                    $('.kcnr .checkall').prop('checked', true)
                } else {
                    $('.kcnr .checkall').prop('checked', false)
                }
            })
        })

		/*隔行换色*/
        //鼠标移到tr上时，执行函数
        $('tr').mouseover(function () {
            $(this).addClass('select');
        })
        //鼠标移出时
        $('tr').mouseout(function () {
            $(this).removeClass('select');
        })
    })
</script>