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

Question

我有一个包含多个模式列表的第一个复选框。

想我想做的很简单：

当我检查一个架构时，我想让他出现在 dividual 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>';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="SELECT"/> SELECT ? <br />';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="INSERT"/> INSERT ? <br />';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="UPDATE"/> UPDATE ? <br />';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="DELETE"/> DELETE ? <br />';
                    echo '<hr>';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="CREATE"/>CREATE ? <br />';

                echo '</div>';
            }
        ?>

    </div>

</div>

我设法显示了 = 'none' 所有 div “右列表”。

如你所见:

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

但我不能让它们出现在dividually, & dynamically...

谁能帮帮我..?

Answer 1

如果您想动态地执行此操作，则必须使用客户端脚本，例如 javascript。像这样将 onclick 函数添加到您的复选框：

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

此外，将您的列表权限 div 更改为：

echo '<div class="list-right" id="list_right_'.$elt->getSchema().'" style="display:none;">';

然后像这样添加show_checkboxes函数：

echo'
<script>
function show_checkboxes(schema){
   if(this.checked == true){
       document.getElementById("list_right_"+schema).style.display = "block";
   }
   else{
       document.getElementById("list_right_"+schema).style.display = "none";
   }
}
</script>';

Answer 2

用这个显示通讯员div

<div id="list-schemas">
        <?php
            foreach ($schemas as $elt) {
                echo '<input type="checkbox" name="schemas[]" value="' .$elt->getSchema() . '" class="schema"/>' . $elt->getSchema() . '<br />';
            }
        ?>
    </div>

这在你的 javascript

<script>
var schmas=document.getElementsByClassName("schema");

for (var i = 0; i < schema.length; i++) {
    schema[i].onChange = function(e) {
    var schema = e.value;
        if (e.checked) {
            showMe(schema);
        } else {
          hideMe(schema);
          }
    }
}
function showMe(schema) {
   document.getElementById(schema).style.display= block;
}
 function hideMe(schema) {
   document.getElementById(schema).style.display= = none;
}
</script>

但请记住使用 css

中的 display:none 隐藏所有列表权限 div

Answer 3

终于答对了，代码如下：

PhP:

<div>

    <div>

        <h4>Select your schema(s) :</h4>
        <div id="list-schemas">
            <?php
                foreach ($schemas as $elt) {
                    echo '<input id="' . $elt->getSchema() . '" onclick="show_checkboxes(\''.$elt->getSchema().'\');" 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="list_right_'.$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>';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="SELECT"/> SELECT ? <br />';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="INSERT"/> INSERT ? <br />';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="UPDATE"/> UPDATE ? <br />';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="DELETE"/> DELETE ? <br />';
                    echo '<hr>';
                    echo '<input type="checkbox" name="privileges[' . $elt->getSchema() . '][]" value="CREATE"/>CREATE ? <br />';

                echo '</div>';
            }
        ?>

    </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 ++) {
    listRight[i].style.display = 'none';
}


/*function to display block when we click on the right schema*/
function show_checkboxes(schema){
   if(document.getElementById(schema).checked){
       document.getElementById("list_right_"+schema).style.display = "block";
   }
   else{
       document.getElementById("list_right_"+schema).style.display = "none";
   }
}

感谢您的帮助。

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

Can't show another checkbox by clicking a checkbox dynamically & individually

php

checkbox

dynamic

show

hide