因此,基本上,我有一个带有多个模式列表的第一个复选框。
我想做的很简单:
当我检查模式时,我想在右下角显示他的个人div“列表右”,这是另一个复选框。
这是我的代码:
<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
但是我不能让它们单独,动态地显示...
有人可以帮助我吗?。
答案 0 :(得分:0)
如果您想动态地进行此操作,则必须使用客户端脚本,例如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>';
答案 1 :(得分:0)
使用它来显示对应的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
答案 2 :(得分:0)
最后是正确的,下面是代码:
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";
}
}
谢谢您的帮助。