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

【问题标题】：Update checked state of checkbox in table header on page load在页面加载时更新表头中复选框的选中状态
【发布时间】：2017-07-22 08:03:14
【问题描述】：

我有一个表格，第一列顶部有一个复选框，允许用户选择表格中的所有项目并执行 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

【问题讨论】：

没有回头路了。您需要在生成thead 之前检查所有复选框的状态。
所以你想要的是 - if you click on the header checkbox all the checkbox should check.??

标签： javascript php jquery html

【解决方案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>

【讨论】：

【解决方案2】：

简单地使用string concatenation 来解决问题，如下所示

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

第二个：在foreach循环外设置$check_all_button=true;在foreach循环检查任何行是notchecked意味着将变量设置为false。

3rd：毕竟这将表头部分与另一个变量连接起来。基于$check_all_button变量值勾选复选框。

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

<?php

    $found = $result->getFoundSetCount();
    $table_tr='';
    $check_all_button=true;
    foreach($records as $record) 
    {

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

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

            $check_all_button=false;

        } else {
            $checked = ' checked';
        }


       $table_tr.="<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> ";


    <?php

    } 

    $check_all_button=true;
    $table_and_head='';

    $table_and_head.="<table class='table table-condensed table-striped table-bordered'>
                           <thead>
                             <th><input type='checkbox' class='select-all checkbox' name='select-all'";
                               if($check_all_button==true){   $table_and_head.=' checked'; }
             $table_and_head.=" />    </th>
                             <th class='text-center' scope='col'>Product ID</th>
                             <th class='text-center' scope='col'>Description</th>
                           </thead>
                        <tbody> </tbody> </table>";

    echo $table_and_head;
    echo $table_tr;

    ?>

【讨论】：