ajax方式实现form表单的全选与取消全选

1. 选择框顶部打勾来实现全选与取消全选
    <form id="deleteForm" action="/aa/cjzs/delMutiData.php" method="post">
        <thead>
            <tr>
                <th><input type="checkbox" id="selectAll"> 全选/取消全选</th>
                <th>字段1</th>
                <th>字段2</th>
                <th>字段3</th>
            </tr>
        </thead>
        <table border="1">                       
            <tr><td><input type='checkbox' name='ids[]' value='0'></td><td>7.6</td><td>aa</td><td>bb</td></tr>                       
            <tr><td><input type='checkbox' name='ids[]' value='1'></td><td>7.6</td><td>aa</td><td>bb</td></tr>                       
            <tr><td><input type='checkbox' name='ids[]' value='2'></td><td>7.6</td><td>aa</td><td>bb</td></tr>                       
        </table>
        <button type="submit">提交</button>
    </form>
   
  <script>
    // 获取全选复选框元素
    const selectAllCheckbox = document.getElementById('selectAll');

    // 获取所有的复选框
    const checkboxes = document.querySelectorAll('input[name="ids[]"]');

    // 绑定全选复选框的点击事件
    selectAllCheckbox.addEventListener('change', function() {
        // 判断全选复选框的状态
        const isChecked = selectAllCheckbox.checked;
        // 设置所有复选框的选中状态与全选复选框一致
        checkboxes.forEach(checkbox => {
            checkbox.checked = isChecked;
        });
    });
  </script>
 
2. 通过两个按钮来实现全选与取消全选

    <form id="deleteForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <table border="1">
            <?php for ($i=0; $i < 10; $i++) { ?>           
            <tr><td><input type='checkbox' name='ids[]' value='<?php echo $i ?>'></td><td>7.6</td><td>aa</td><td>bb</td></tr>
            <?php } ?>
        </table>
        <div class="button-group">
        <button type="submit">提交</button>
        <button type="button" id="selectAllButton">全选</button>
        <button type="button" id="deselectAllButton">取消全选</button>
        </div>       
    </form> 
   
    <script>
    // 获取所有的复选框
    const checkboxes = document.querySelectorAll('input[name="ids[]"]'); 
      //document.querySelectorAll(selectors);selectors可以是一个或多个css选择器，可以是id或class，
      //返回值是一个节点列表的类数组对象，通过checkboxes.forEach获取节点列表的每个对象

    // 获取全选和取消全选按钮
    const selectAllButton = document.getElementById('selectAllButton');   //查询id为selectAllButton的全选按钮状态给常量selectAllButton
    const deselectAllButton = document.getElementById('deselectAllButton');

    // 全选按钮点击事件
    selectAllButton.addEventListener('click', function() {  //给全选按钮添加一个点击事件的监听
        checkboxes.forEach(checkbox => {
            checkbox.checked = true;
        });
    });

    // 取消全选按钮点击事件
    deselectAllButton.addEventListener('click', function() {
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
    });
  </script>