<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>hwork</title>
    <style>
    th{
        text-align: center;
    }
        td{
            text-align: center;
        }
    #b2{
       margin-left: 25px;
    }
        #b3{
        margin-left:25px;
    }
    </style>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>name</th>
        <th>job</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>xiaodongbei</td>
            <td>actor</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>xiaoqiang</td>
            <td>xxactor</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>shege</td>
            <td>director</td>
        </tr>
    </tbody>
</table>
<input type="button" id="b1" value="all">
<input type="button" id="b2" value="anti-all">
<input type="button" id="b3" value="cancel">
<script src="jquery-3.4.1.js"></script>
<script>
//点全选，checkbox都选中
//1.找checkbox
//2.全选，prop（'checked'，true）
$('#b1').click(
    function () {
        $(':checkbox').prop('checked',true);
    }
);

//点取消，checkbox都步选中
//1.找checkbox
//2.全选，prop（'checked'，false）
$('#b3').click(
    function () {
        $(':checkbox').prop('checked',false);
    }
);

//反选
//1.找到所有的checkbox
//2.若已选中，则取消选中；若未选中的，则变为选中

    $('#b2').click(
    function () {
        //找到所有的checkbox，存入变量
        var anticlick = $(':checkbox');
        for (var i = 0; i < anticlick.length; i++) {
            //将每个checkbox包装为jquery对象
            var $anticlick = $(anticlick[i]);
            if ($anticlick.prop('checked')) {
                $anticlick.prop('checked', false);
            } else   {
                $anticlick.prop('checked', true);
            }
        }
    }
);

</script>
</body>
</html>