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

Question

I am trying to implement a small part of my program where when an initial checkbox is clicked, it would open multiple checkboxes are opened up for selection. 我正在尝试实现程序的一小部分，当单击初始复选框时，它将打开多个复选框供选择。 I don't want to use forloop (or dynamically) to create the multiple checkboxes but I need to manually create them. 我不想使用forloop（或动态地）创建多个复选框，但我需要手动创建它们。

My program is below and I am not sure why it doesn't work. 我的程序在下面，我不确定为什么它不起作用。 If someone can kindly pleaes point me to my mistake, I would greatly appreciate. 如果有人能请我指出我的错误，我将不胜感激。 I am not skilled with PHP/JavaScript. 我不擅长PHP / JavaScript。

Thanks! 谢谢！

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

Answer 1

Your on the right track. 您走对了。

You have a few problems in your code. 您的代码中有一些问题。

1) You forgot to enclose your new checkbox tag within quotation marks. 1）您忘记将新的复选框标签括在引号中。

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

should be: 应该：

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

Also note the change from type "chkbox" to "checkbox" 另请注意，从类型“ chkbox”更改为“复选框”

2) To set the initial state for a checkbox I would use the inbuilt prop function in JQuery. 2）要设置复选框的初始状态，我将使用JQuery中的内置prop函数。 For example: 例如：

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

rather than your code of: 而不是您的代码：

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

3) The last problem is when you append the new checkbox to the form. 3）最后一个问题是当您将新复选框附加到表单时。 The way that i would do this is using JQuery again: 我这样做的方式是再次使用JQuery：

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

and give the form element an id of "myForm" 并将表单元素的ID设置为“ myForm”

Please find below my full code which works to your requirements: 请在下面找到符合您要求的完整代码：

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

Hope that you found this useful. 希望您觉得这有用。

Answer 2

You can also do this with CSS: 您也可以使用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>

Source: this Stack Overflow question 资料来源：这个堆栈溢出问题

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

问题描述

2 个解决方案

解决方案1
3 2016-10-23 02:07:07

解决方案2
3 2016-10-23 02:22:00

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

问题描述

2 个解决方案

解决方案1 3 2016-10-23 02:07:07

解决方案2 3 2016-10-23 02:22:00

解决方案1
3 2016-10-23 02:07:07

解决方案2
3 2016-10-23 02:22:00