php - 无法通过动态和单独单击复选框来显示另一个复选框
问题描述
我有一个带有几个模式列表的第一个复选框。
想要我想做的很简单:
当我检查一个模式时,我想让他的个人 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' 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
但我不能让它们单独出现,并且动态地......
有谁能够帮助我..?
解决方案
如果你想动态地这样做,你将不得不使用客户端脚本,比如 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){
if(this.checked == true){
document.getElementById("list_right_"+schema).style.display = "block";
}
else{
document.getElementById("list_right_"+schema).style.display = "none";
}
}
</script>';
推荐阅读
- java - 如何替换 Android 的相机输入流?
- html - 具有不同测试结果的 HTML 电子邮件开发
- javascript - 将对象作为参数传递给 Link
- java - Java:检查数组是否是堆
- jquery - jQuery弄乱了换行符
- vba - 运行时错误 9 - 脚本超出范围
- jquery - 从外部 URL 访问 JSON 时获取“未捕获的语法错误:意外的令牌:”
- angular6 - Angular 6类型定义未编译
- actionscript-3 - 将变量从 Html StageWebview 传递到 actionscript
- javascript - 如何使用 javascript 创建具有 100 个唯一 td 的 html 表