javascript - 在页面加载时更新表头中复选框的选中状态

Question

我有一个表格，第一列顶部有一个复选框，允许用户选择表格中的所有项目并执行 AJAX 脚本。我正在使用 PHP 从数据库查询生成 html 表 - 如果表中的所有项目也针对同一列进行了检查，我想为标题复选框设置选中值。

在 PHP 文件中，我首先设置表格和标题行，然后执行 foreach 循环以根据找到的记录创建表格行。我可以沿途添加一个计数器来跟踪检查了多少行，但是由于这是在表标题之后发生的，所以我看不到随后更新标题行的方法吗？除非这可以通过 Javascript 完成？

这是我生成表格的 PHP 页面:

<table class="table table-condensed table-striped table-bordered">
   <thead>
     <th><input type="checkbox" class="select-all checkbox" name="select-all" />    </th>
     <th class="text-center" scope="col">Product ID</th>
     <th class="text-center" scope="col">Description</th>
   </thead>
<tbody>

  $found = $result->getFoundSetCount();

  foreach($records as $record) {

        $productID = $record->getField('productID');

        if (!in_array($productID, $_SESSION['selectedProductIDs'])) {
            $checked = '';
        } else {
            $checked = ' checked';
        }

        ?>
        <tr class="" id="<?php echo $recid ?>">
            <td id="<?php echo $productID; ?>"><input type="checkbox" class="select-item checkbox" name="select-item" value="<?php echo $productID; ?>" <?php echo $checked; ?>></td>
            <td><?php echo $productID; ?></td>
            <td><?php echo $record->getField('Description'); ?></td>
        </tr>                                   

} // foreach

Answer 1

i did not test this code, but i think is what do you search

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
    var allAreChecked = true;
    $("table > tbody > tr > td > input[type=checkbox]").each(function(){
        if(! $(this).is(':checked'))
            allAreChecked = false;
    });

    if(allAreChecked === true){
        $("table > thead > tr > th > input[type=checkbox]").prop('checked', true);
    }

});
</script>