Question

因此，基本上，我想检查html div中的所有复选框（如果该div的“父复选框”已选中）。我是javascript / php / html的新手。谁能提供一个有用的解释性例子？

这是我的代码：

    <form>
  <?php
    while(list($k, $v)=each($Aff))
    {
    if ($k == 0)
    {
      array_push($parentAff, substr($v, 0, 2));
      $substring = $v;
      echo ('<div id ="Div'.$v.'">');
    }
    if ((substr($substring, 0, 2) != substr($v, 0, 2)) && (strlen($substring) != 1))
    {
      echo ('</div>');
      echo ('<div id ="'.$v.'">');
      array_push($parentAff, substr($v, 0, 2));
      $counter++;
      $substring = $v;
      echo "<hr>";
    }

    echo ('<input type="checkbox" name="Aff[]" id="'.$v.'" value="'.$v.'" /><label for="text'.$k.'">'.$v.'</label>');


    $substring = $v;

    }

    echo ('</div>');

  ?>
</form>

div中复选框的数量取决于哪些数据从数据库中输出到数组Aff []。每个div的父复选框将是由div ID标识的parentAff数组中的那个。

Answer 1

有关如何使用JS完成此操作的示例，请参见以下代码笔。

https://codepen.io/psmith104/pen/gByKzx

我也在这里也包含了代码。

这是HTML

<div>
    <input type="checkbox" class="parent" /> Parent Checkbox
    <br/>
    <input type="checkbox" /> Child 1
    <br/>
    <input type="checkbox" /> Child 2
    <br/>
    <input type="checkbox" /> Child 3
    <br/>
    <input type="checkbox" /> Child 4
</div>

这是JS

document.querySelectorAll("input[type=checkbox].parent").forEach(function(parent) {
    parent.addEventListener("click", function(e) {
        e.target.parentElement.querySelectorAll("input[type=checkbox]:not(.parent)").forEach(function(child) {
            child.checked = true;
        });
    });
});

自动选中动态html div中的所有复选框

1 个答案: