如何将两个复选框数组链接在一起 JavaScript

Question

我想将两个复选框连接在一起，以便在单击主复选框时检查其子复选框。 使用以下代码，我从数据库中检索数据：

 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'].' 
                       </pre>';

      }

并显示项目：

<?php echo $option; ?>

如果选中主框，那么如何可能也会检查其子框。

它是我的 JavaScript 代码，但我认为必须通过循环使用：它只适用于第一个孩子而不是其他孩子。

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

感谢您的考虑。

Answer 1

ID 应该是唯一的。 在您的情况下，您可以使用查询的行号来构建具有公共前缀的唯一 ID，这通常是一种好习惯。

这是一个可以工作的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，因此如果我们想检查它，它是可用的。

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

处理程序基于常见的 class 获取所有相关的复选框，与 ID 不同，它可以重复，并遍历返回的NodeList并根据父复选框值更新它们的值。 因此，选中或取消选中父级也会更新子级。

Answer 2

父子复选框

使用@CoolEsh 编写的上述脚本，我可以解决这个问题并通过循环更新到特定的每个父母和他们的孩子：

<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 循环：

<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>

它使用唯一的 ID。 感谢@Ravenous 和@evolutionxbox