我有一個帶有幾個模式列表的第一個復選框。想要我想做的很簡單：當我檢查一個模式時，我想讓他的個人 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但我不能讓它們單獨出現，并且動態地......有誰能夠幫我..？
3 回答
一只斗牛犬
TA貢獻1784條經驗 獲得超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
千萬里不及你
TA貢獻1784條經驗 獲得超9個贊
最后它是正確的，這是代碼：
磷酸：
<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";
}
}
感謝您的幫助。
楊__羊羊
TA貢獻1943條經驗 獲得超7個贊
如果你想動態地這樣做，你將不得不使用客戶端腳本，比如 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>';
- 3 回答
- 0 關注
- 138 瀏覽
添加回答
舉報
0/150
提交
取消