选中初始复选框时如何显示多个复选框（使用 PHP/Javascript）答案

【问题标题】：How can I have multiple checkboxes appear when initial checkbox is checked (using PHP/Javascript)选中初始复选框时如何显示多个复选框（使用 PHP/Javascript）
【发布时间】：2016-10-23 01:39:46
【问题描述】：

我正在尝试实现我的程序的一小部分，当单击初始复选框时，它会打开多个复选框以供选择。我不想使用 forloop（或动态）来创建多个复选框，但我需要手动创建它们。

我的程序在下面，我不确定为什么它不起作用。如果有人可以请我指出我的错误，我将不胜感激。我不擅长 PHP/JavaScript。

谢谢！

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
 <script type="text/javascript">
    $(document).ready(function() {
    //set initial state.
    $('#checkbox').val($(this).is(':unchecked'));

    $('#checkbox').change(function() {
        if($(this).is(":checked")) {
            var box = document.createElement("div");
            box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;
            document.myForm.appendChild(box);
            hasBox = true;
        }  
    });
});
</script>
</head>
<body>

<p>Click on this paragraph.</p>
<form action="">
<input id="checkbox" name="click" type="checkbox" onclick="check(this)"/>initial checkbox<br>

</body>
</html>

【问题讨论】：

标签： javascript php jquery checkbox

【解决方案1】：

你也可以用 CSS 做到这一点：

.secondary-checkboxes
{
  display: none;
}

.primary-checkbox:checked ~ .secondary-checkboxes
{
  display: initial;
}

<input type="checkbox" class="primary-checkbox"> Primary checkbox
<br>
<div class="secondary-checkboxes">
  <input type="checkbox"> Secondary checkbox 1
  <br>
  <input type="checkbox"> Secondary checkbox 2
  <br>
  <input type="checkbox"> Secondary checkbox 3
  <br>
</div>

来源：this堆栈溢出问题

【讨论】：

这存在选择主要复选框将在页面中显示所有辅助复选框的问题。为了避免使用通用的同级选择器 (~) 并改用相邻的同级选择器 (+)，您可以在 .secondary-checkboxes 上使用 ::before 伪选择器，其属性内容为：' ';显示：块；这样你就可以删除 br。

【解决方案2】：

你在正确的轨道上。

您的代码中存在一些问题。

1) 您忘记将新的复选框标签括在引号内。

    box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;

应该是：

    box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";

还要注意类型“chkbox”到“checkbox”的变化

2) 要设置复选框的初始状态，我将使用 JQuery 中的内置 prop 函数。例如：

    $('#checkbox').prop('checked', false);

而不是您的代码：

    $('#checkbox').val($(this).is(':unchecked'));

3) 最后一个问题是当您将新复选框附加到表单时。我这样做的方式是再次使用 JQuery：

    $("#myForm").append(box);

并给表单元素一个“myForm”的id

请在下面找到符合您要求的完整代码：

$(document).ready(function() {
  //set initial state.
  $('#checkbox').prop('checked', false);

  $('#checkbox').on('click', function() {
    if($(this).is(":checked")) {
      var box = document.createElement("div");
      box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";
      $("#myForm").append(box);
      hasBox = true;
    }  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>Click on this paragraph.</p>
<form action="" id="myForm">
  <input id="checkbox" name="click" type="checkbox"/>initial checkbox<br>
</form>

希望你觉得这很有用。

【讨论】：

对于拥有 31 个 SO 点的人，您的回答就像专业人士一样。 +1
嗯，如果有一种方法可以在未选中初始框时隐藏辅助框，那将会很有帮助。
为了显示我的方法有效，如果您希望它在取消选中该框后消失，请尝试 user48147 在 css 中执行此操作的答案。