我怎么能有多个复选框出现时，初始复选框被选中(使用PHP/Javascript) - How can I have multiple checkboxes appear when initial checkbox is checked (using PHP/Javascript)

How can I have multiple checkboxes appear when initial checkbox is checked (using PHP/Javascript)

我试图实现我的程序的一小部分，当一个初始复选框被点击时，它会打开多个复选框打开供选择。我不想使用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>

你也可以使用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 Stack Overflow问题

你做对了。

你的代码有几个问题。

1)你忘了把你的新复选框标签用引号括起来。

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

应:

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

还要注意type从"chkbox"变为"checkbox"

2)为了设置一个复选框的初始状态，我将使用JQuery内置的prop函数。例如:

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

而不是你的代码

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

3)最后一个问题是当您将新的复选框附加到表单。我的方法是再次使用JQuery:

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

并给form元素一个id为"myForm"

请在下面找到我的完整代码，可以满足您的要求:

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

希望对您有用