Как связать два флажка Array вместе JavaScript

Question

Я хочу соединить два флажка вместе, чтобы при щелчке основного флажка затем проверялся его дочерний элемент. с кодом ниже я получаю данные из базы данных:

<code> while($row = mysqli_fetch_array($query_show_all_receivers))
      {
          $option .= ' <pre> <input onclick="func()" type="checkbox" class="checkbox-inline" name="check_Main[]" value = "'.$row['user_username'].'">'. row['user_username'].'    
                             <input  type="checkbox" class="checkbox-inline" name="check_child[]"  id="check_child[]" value = "'.$row['user_mobile'].'">  '.$row['user_mobile'].' 
                       

'; }

и покажите элементы:

<?php echo $option; ?>

Как возможно, если флажок Main box установлен, тогда будет проверен и его дочерний элемент.

Это мой код JavaScript, но Я думаю, что нужно использовать через l oop: это просто работа первого ребенка, а не других.

        <script>
           function func()
               {
                   document.getElementById('check_child[]').checked = true ;
               }
         </script>

Спасибо за ваше внимание.

Answer 1

идентификаторы должны быть уникальными. В вашем случае вы могли бы использовать номер строки запроса для создания уникального идентификатора с общим префиксом, как правило, это хорошая практика.

Вот CodePen, который работает https://codepen.io/Raven0us/pen/abvJqLP

<label for="checkbox-parent">Parent</label>
<input type="checkbox" onchange="func(event)" name="checkbox_parent" id="checkbox-parent">

<div>
    <label for="checkbox-child-1">Child 1</label>
    <input type="checkbox" name="checkbox_child_1" id="checkbox-child-1" class="checkbox-child">
    <label for="checkbox-child-2">Child 2</label>
    <input type="checkbox" name="checkbox_child_2" id="checkbox-child-2" class="checkbox-child">
    <label for="checkbox-child-3">Child 3</label>
    <input type="checkbox" name="checkbox_child_3" id="checkbox-child-3" class="checkbox-child">
</div>

Я изменил onclick на onchange, некоторые люди предпочитают click, в основном по старым причинам (я думаю?), Но я бы не стал. Более того, я передал фактическое событие в функцию, поэтому оно доступно, если мы хотим проверить что-то о нем.

function func(event) {
    document.querySelectorAll('.checkbox-child').forEach(checkboxChild => {
        checkboxChild.checked = event.target.checked;
    })
}

Обработчик получает все связанные флажки на основе общего класса, который может повторяться, в отличие от Идентификаторы, и l oop через возвращенный NodeList и обновите их значение на основе значения родительского флажка. Таким образом, проверка или снятие флажка родитель также будет обновлять детей.

Answer 2

Родительский и дочерний флажки

с помощью приведенного выше сценария @ CoolE sh Я мог бы решить эту проблему и обновить с помощью l oop, указав c всех родителей и их детей :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"> </script>
  <script>
        var checkboxHandlerObj = {
  init: function() {
    $('#customerServices input:checkbox[class="parent"]').click(checkboxHandlerObj.parentClicked);
    $('#customerServices input:checkbox[class^="parent-"]').click(checkboxHandlerObj.childClicked);
  },

  parentClicked: function() {
    if ($(this).attr('checked')) {
      $('#customerServices input:checkbox[class="parent-' + $(this).attr('id') + '"]').attr('checked', 'checked');
    } else {
      $('#customerServices input:checkbox[class="parent-' + $(this).attr('id') + '"]').removeAttr('checked');
    }
  },

  childClicked: function() {
    var temp = $(this).attr('class').split('-');
    var parentId = temp[1];

    if ($(this).attr('checked')) {
      $('#' + parentId).attr('checked', 'checked');
    } else {
      var atLeastOneEnabled = false;
      $('#customerServices input:checkbox[class="' + $(this).attr('class') + '"]').each(function() {
        if ($(this).attr('checked')) {
          atLeastOneEnabled = true;
        }
      });
      if (!atLeastOneEnabled) {
        $('#' + parentId).removeAttr('checked');
      }
    }
  }

};

checkboxHandlerObj.init();

         </script>

и PHP l oop:

<div id="customerServices">
<?php
$x = 1;
$id = 1;
while($x <= 5) {
    $x++;
$option .= '<input id="'.$id.'"  class="parent" type="checkbox" name="check_Main[]" value = "1">1
<input  type="checkbox" name="check_child[]" class="parent-'.$id.'"  value = "2">  2 <br> ';

$id++ ;
} 

 echo $option;
?>
</div>

Работает с уникальным идентификатором. Спасибо за @Ravenous и @evolutionxbox