選中初始復選框時（如何使用PHP / Javascript）如何顯示多個復選框

Question

我正在嘗試實現程序的一小部分，當單擊初始復選框時，它將打開多個復選框供選擇。 我不想使用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>

Answer 1

您走對了。

您的代碼中有一些問題。

1）您忘記將新的復選框標簽括在引號中。

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

應該：

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

另請注意，從類型“ chkbox”更改為“復選框”

2）要設置復選框的初始狀態，我將使用JQuery中的內置prop函數。 例如：

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

而不是您的代碼：

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

3）最后一個問題是當您將新復選框附加到表單時。 我這樣做的方式是再次使用JQuery：

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

並將表單元素的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>

希望您覺得這有用。

Answer 2

您也可以使用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>

資料來源：這個堆棧溢出問題

選中初始復選框時（如何使用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