jQuery学习笔记——表格全选反选功能实例

效果：

点击最上面的全选按钮，下面4个checkbox被选中
下面四个按钮都选了则上面的全选按钮自动选上，下面只有一个没选，全选按钮都不选

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格全选反选</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        table{
            width: 300px;
            border-collapse: collapse;
            border: 1px solid #666666;
        }
        thead{
            width: 300px;
            height: 50px;
            color: #fff;
            background: #008dd0;
        }
        thead th,td{
            border: 1px solid #d0d0d0;
            font-size: 16px;
            color: #404060;
            text-align: center;
            padding: 10px;
        }
        tbody{
            background: #f0f0f0;
        }

    
    </style>
    <script src="jquery-3.4.1.js"></script>
    <script type="text/javascript">

        //需求1.全选框选中，其他都选中，没选中则反之
        //需求2.下面的多选框都选中了，则上面的全选框选中。下面有一个没选，上面全选框都不选
        $(function(){
            $('#j_cbAll').click(function () { 
                /***需求1***/
                //获取多选框的checked值
                var checkedValue = $(this).prop('checked');               
                //让下面的多选框checked跟随这个checkedValue
                $('#j_tb input').prop('checked',checkedValue); 
             });
             /***需求2***/
             $('#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);
                    }
                 });
        });
    </script>
</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>果冻</td>
                    <td>广中医</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>晓晴</td>
                    <td>广工</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>玲子</td>
                    <td>广工</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>侨鑫</td>
                    <td>航海</td>
                </tr>
            </tbody>
        </table>
    </div>
<div id="one"></div>
</body>
</html>

知识点&技巧：

1. jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性

不能用attr()方法获取，只能用prop()

$('#j_cbAll').prop('checked',true);

2. 判断下面四个多选框是否都选中了

可以获取多选框的数目，再获取筛选出checked的多选框的数目

当两者相等时，全选框选中

jQuery学习笔记——表格全选反选功能实例

猜你喜欢