javascript 如何标记复选框在一个列表中向后,数字降序?

xoshrz7s  于 2023-05-21  发布在  Java
关注(0)|答案(1)|浏览(162)

我正在使用PHP从数据库生成列表。每行按升序编号,并包含一个复选框。如果选择一个,则其上方的所有复选框(按数字降序排列)也应被选中。
我已经尝试了各种方法,但它不起作用。下面是代码的缩写形式:

<table id="mySEARCH" class="shoppinglist-content">
<!-- ******************************************************************************** shopping list beginn-->
    <!-- script test start -->
    <?php
        if(isset($_COOKIE['shoppinglist'])){
            $list = $_COOKIE['shoppinglist'];
            $stmt = $pdo->prepare("SELECT * FROM `$list`");
            $stmt->execute();
            $x = 0;
            foreach($stmt as $item)
            { $x++;?>
                <tr id="line<?php echo $x;?>" style="opacity: 1.0;">
                <td class="split-list"><input type="checkbox" id="split-list-<?php echo $x;?>" name="split-list" onchange="markAbove<?php echo $x;?>()" value="<?php echo $x;?>"></td>
                </tr>
                <script>
                    function markAbove<?php echo $x;?>(){
                        var choosedLine = document.querySelectorAll("input[type=checkbox]");
                        for(var i = <?php echo $x;?>; i > choosedLine.value; i--){
                            choosedLine.setAttribute("checked", "");
                        }
                        console.log(i);
                    }
                </script>
            <?php
            }
        }else {
/******************************************************************************** shopping list end****/
            ?><tr><td></td><td></td><td>Keine Items vorhanden</td><td></td><td></td><td></td><td></td></tr><?php
        }
    ?>
<!-- script test end -->
</table>

有没有人有一个提示,这是如何工作的?

kx7yvsdv

kx7yvsdv1#

你不应该在循环中添加你的函数。你可以像下面这样做。在javascript中,我们可以监听checkbox的变化,并从该元素中获取父tr。然后我们循环查找前一个树,并在其中查找复选框。
还没有测试的代码,但你会得到的想法

const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
allCheckboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    let elem = this.closest('tr');
    while (elem = elem.previousElementSibling) {
      elem.querySelector('input[type="checkbox"]').checked = true;
    }
  });
});
<table>
  <tr>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
  </tr>
</table>

相关问题