jQuery-实现表格的全选反选_:如果下面表体中的多选框都被选中,那么上面的多选框也跟着被选中。-优快云博客

本文链接：https://blog.youkuaiyun.com/gxgalaxy/article/details/103134380

本文介绍了一个使用HTML、CSS和jQuery实现的多选框联动效果，包括全选功能的实现。当顶部的全选框被选中时，所有子项多选框也会被选中；反之，如果所有子项都被选中，则全选框也会自动选中。代码中详细展示了如何通过监听多选框的状态变化来实现这一功能。

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

这里写自定义目录标题

效果图

在这里插入图片描述

需求

需求１：上面的多选框选中，下面的多选框跟着选中，上面的多选框没有选中，下面的多选框跟着不选中
需求２：下面的多选框都有单击事件
需求３：如果下面的多选框们都选中了，那么上面的那个多选框跟着选中，如果下面多选框有一个没有选中，那么上面的多选框也就不选中：

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery-3.4.1.min.js"></script>
    <style>
            * {
                padding: 0;
                margin: 0;
            }
            .wrap {
                width: 300px;
                margin: 100px auto 0;
            }
    
            table {
                border-collapse: collapse;
                border-spacing: 0;
                border: 1px solid #c0c0c0;
            }
    
            th,
            td {
                border: 1px solid #d0d0d0;
                color: #404060;
                padding: 10px;
            }
    
            th {
                background-color: #09c;
                font: bold 16px ;
                color: #fff;
            }
    
            td {
                font: 14px ;
            }
    
            tbody tr {
                background-color: #f0f0f0;
            }
    
            tbody tr:hover {
                cursor: pointer;
                background-color: #fafafa;
            }
        </style>
</head>
<body>
        <div class="wrap">
                <table>
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="j_cbAll"/>
                            </th>
                            <th>课程名称</th>
                            <th>所属学院</th>
                        </tr>
                    </thead>
                    <tbody id="j_tb">
                        <tr>
                            <td>
                                <input type="checkbox"/>
                            </td>
                            <td>JavaScript</td>
                            <td>AAA学院</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox"/>
                            </td>
                            <td>css</td>
                            <td>BBB学院</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox"/>
                            </td>
                            <td>html</td>
                            <td>CCC学院</td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox"/>
                            </td>
                            <td>jQuery</td>
                            <td>DDD学院</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="one"></div>
</body>
</html>
<script>
    $(function(){
        //需求１：上面的多选框选中，下面的多选框跟着选中，上面的多选框没有选中，下面的多选框跟着不选中
        //需求２：下面的多选框都有单击事件
        //如果下面的多选框们都选中了，那么上面的那个多选框跟着选中，如果下面多选框有一个没有选中，那么上面的多选框也就不选中

        //需求１
        $('#j_cbAll').click(function(){
            //获取这个多选框的checked值
            var checkedValue = $(this).prop('checked');
            //让下面的多选框的checked值跟随这个checkedValue
            $('#j_tb input').prop('checked',checkedValue);
        });
        //需求２
        $('#j_tb input').click(function(){
            //判断下面的那四个多选框是否都被选中了
            var numOfAll = $('#j_tb input').length;//获取到下面的所有的多选框的个数
            var numOfSelect = $('#j_tb input:checked').length;//获取到下面被选中的多选框的个数
            //判断
            // if(numOfAll == numOfSelect){
            //     //全部被选中
            //     $('#j_cbAll').prop('checked',true);
            // }else{
            //     $('#j_cbAll').prop('checked',false);
            // }
            //上面的判断优化
            $('#j_cbAll').prop('checked',numOfAll == numOfSelect);
        });
    });
</script>