这里写自定义目录标题

效果图

在这里插入图片描述

需求

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

源代码

<!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
AtomGit 开源协作平台测评赛

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐

ADS1292R 使用 过程 心电图 高精度ADC模块

文章目录1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础https://www.ti.com.cn/cn/lit/wp/slyy192/slyy192.pdf?ts=1600659610730&ref_u

avatar 开放原子开发者工作坊
cover

实现一个家庭安防与环境监测系统（一）

avatar 开放原子开发者工作坊

【cf】Codeforces Round #774 (Div. 2) 前4题

题目A. Square Counting 简单数学题目大意题解代码B. Quality vs Quantity 排序题目大意题解代码C. Factorials and Powers of Two 状态压缩dp+位运算题目大意题解代码D. Weight the Tree 树形dp+dfs题目大意题解代码E. Power Board 看起来像是数论？许多年没打cf了，偶尔打了一盘，恢复紫名了。A. S

avatar 开放原子开发者工作坊