这里写自定义目录标题

效果图

在这里插入图片描述

需求

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

源代码

<!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>
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届openEuler生态大会（中国·湖南）成功举办

10月30日，第二届openEuler生态大会（中国·湖南）成功举办。

avatar 开放原子开发者工作坊

“小满”安全车控操作系统正式在AtomGit开源

10月24日，由中国汽车工业协会指导，普华基础软件股份有限公司主办的“小满”安全车控操作系统开源发布会暨共建计划说明会成功举行。普华基础软件宣布将安全车控操作系统“小满”（简称“小满”）V24.10源代码正式在开放原子开源基金会（简称“基金会”）旗下AtomGit开源协作平台开源，并在AtomGit平

avatar 开放原子开发者工作坊

开放原子大赛——CIKM 2024赛果揭晓，10强争霸，角逐第33届国际信息与知识管理大会

开放原子大赛——CIKM 2024赛果揭晓，10强争霸，角逐第33届国际信息与知识管理大会

avatar 开放原子开发者工作坊