Автоматическая проверка всех флажков в динамическом html div

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 будет таким же, как в массиве parentAff, который идентифицируется по id div.

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;
        });
    });
});