无法通过动态和单独单击复选框来显示另一个复选框

Question

我有一个带有几个模式列表的第一个复选框。

想要我想做的很简单：

当我检查一个模式时，我想让他的个人 div “list-right”出现在下面，这是另一个复选框。

这是我的代码：

<div>

    <div>

        <h4>Select your schema(s) :</h4>

        <div id="list-schemas">

            <?php

                foreach ($schemas as $elt) {

                    echo '<input type="checkbox" name="schemas[]" value="' . $elt->getSchema() . '"/>' . $elt->getSchema() . '<br />';

                }

            ?>

        </div>

    </div>

    <h4>Privileges on tables by selected schemas :</h4>

    <div id="div-privileges">

        <?php

            foreach ($schemas as $elt) {

                echo '<div class="list-right" id="' . $elt->getSchema() . '">';

                    echo '<label for="list-right">' . $elt->getSchema() . ' :</label><br />';

                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="REVOKE"/> REVOKE ? <br />';

                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="ALL"/> ALL PRIVILEGES ? <br />';

                    echo '<hr>';

            }

        ?>

    </div>

</div>

我设法显示 = 'none' ALL THE div "list-right"。

如你看到的 ：

var listRight=document.getElementsByClassName("list-right");

for (var i = 0; i < listRight.length; i ++) {

    listRight[i].style.display = 'none';

}

没有 JavaScript 函数我有什么： https ://image.noelshack.com/fichiers/2019/38/3/1568790896-capture2.png

我拥有的 JavaScript 函数： https ://image.noelshack.com/fichiers/2019/38/3/1568790893-capture.png

我想要什么： https ://image.noelshack.com/fichiers/2019/38/3/1568790898-capture3.png

但我不能让它们单独出现，并且动态地......

有谁能够帮我..？

Answer 1

使用它来显示对应的 div<div id="list-schemas">&nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; foreach ($schemas as $elt) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<input type="checkbox" name="schemas[]" value="' .$elt->getSchema() . '" class="schema"/>' . $elt->getSchema() . '<br />';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; </div>这在你的javascript中<script>var schmas=document.getElementsByClassName("schema");for (var i = 0; i < schema.length; i++) {&nbsp; &nbsp; schema[i].onChange = function(e) {&nbsp; &nbsp; var schema = e.value;&nbsp; &nbsp; &nbsp; &nbsp; if (e.checked) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showMe(schema);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hideMe(schema);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}function showMe(schema) {&nbsp; &nbsp;document.getElementById(schema).style.display= block;}&nbsp;function hideMe(schema) {&nbsp; &nbsp;document.getElementById(schema).style.display= = none;}</script>但是请记住通过在 css 中使用 display:none 来隐藏所有列表权限的 div

Answer 2

最后它是正确的，这是代码：磷酸：<div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <h4>Select your schema(s) :</h4>&nbsp; &nbsp; &nbsp; &nbsp; <div id="list-schemas">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; foreach ($schemas as $elt) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<input id="' . $elt->getSchema() . '" onclick="show_checkboxes(\''.$elt->getSchema().'\');" type="checkbox" name="schemas[]" value="' . $elt->getSchema() . '"/>' . $elt->getSchema() . '<br />';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp; &nbsp; <h4>Privileges on tables by selected schemas :</h4>&nbsp; &nbsp; <div id="div-privileges">&nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; foreach ($schemas as $elt) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<div class="list-right" id="list_right_'.$elt->getSchema().'">';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<label for="list-right">' . $elt->getSchema() . ' :</label><br />';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="REVOKE"/> REVOKE ? <br />';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="ALL"/> ALL PRIVILEGES ? <br />';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<hr>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="SELECT"/> SELECT ? <br />';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="INSERT"/> INSERT ? <br />';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="UPDATE"/> UPDATE ? <br />';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="DELETE"/> DELETE ? <br />';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<hr>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="CREATE"/>CREATE ? <br />';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '</div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; </div></div>Javascript：/*Way to display none all the list-right divs*/var listRight=document.getElementsByClassName("list-right");for (var i = 0; i < listRight.length; i ++) {&nbsp; &nbsp; listRight[i].style.display = 'none';}/*function to display block when we click on the right schema*/function show_checkboxes(schema){&nbsp; &nbsp;if(document.getElementById(schema).checked){&nbsp; &nbsp; &nbsp; &nbsp;document.getElementById("list_right_"+schema).style.display = "block";&nbsp; &nbsp;}&nbsp; &nbsp;else{&nbsp; &nbsp; &nbsp; &nbsp;document.getElementById("list_right_"+schema).style.display = "none";&nbsp; &nbsp;}}感谢您的帮助。

Answer 3

如果你想动态地这样做，你将不得不使用客户端脚本，比如 javascript。将 onclick 函数添加到您的复选框，如下所示：echo '<input onclick="show_checkboxes(\''.$elt->getSchema().'\');" type="checkbox" name="schemas[]" value="' . $elt->getSchema() . '"/>' . $elt->getSchema() . '<br />';此外，将您的 list-right div 更改为：echo '<div class="list-right" id="list_right_'.$elt->getSchema().'" style="display:none;">';然后像这样添加 show_checkboxes 函数：echo'<script>function show_checkboxes(schema){&nbsp; &nbsp;if(this.checked == true){&nbsp; &nbsp; &nbsp; &nbsp;document.getElementById("list_right_"+schema).style.display = "block";&nbsp; &nbsp;}&nbsp; &nbsp;else{&nbsp; &nbsp; &nbsp; &nbsp;document.getElementById("list_right_"+schema).style.display = "none";&nbsp; &nbsp;}}</script>';