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

我没有测试这段代码，但我认为你会搜索什么

<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>

Answer 2

使用下面的string concatenation进行简单的操作

第一名：首先运行foreach循环并将concatenate所有tr作为字符串运行。

第二名在foreach循环之外设置foreach循环中的$check_all_button=true;检查任何行not checked表示将变量设置为{ {1}}。

3rd：然后将表头部分与另一个变量连接起来。根据{{1}}变量值选中复选框。

第4名：最后回显两个变量。渲染html表。

false

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

2 个答案: