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

Question

I have a first checkbox with a list of several schemas.
Want I want to do is simple:
When I check a schema, I want to make appear his individual div "list-right" right below, which is ANOTHER checkbox.
Here is my code :
<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>
I managed to display = 'none' ALL THE div "list-right".
As you can see :
var listRight=document.getElementsByClassName("list-right");
for (var i = 0; i < listRight.length; i ++) {
listRight[i].style.display = 'none';
}
What I have without the JavaScript function :
https://image.noelshack.com/fichiers/2019/38/3/1568790896-capture2.png
What I have with the JavaScript function :
https://image.noelshack.com/fichiers/2019/38/3/1568790893-capture.png
What I want :
https://image.noelshack.com/fichiers/2019/38/3/1568790898-capture3.png
But I can't make them appear individually, & dynamically...
Can anybody help me..?

Answer 1

If you want to this this dynamically you will have to use a client-side script, like javascript. Add onclick functions to your checkboxes like this:
echo '<input onclick="show_checkboxes(\''.$elt->getSchema().'\');" type="checkbox" name="schemas[]" value="' . $elt->getSchema() . '"/>' . $elt->getSchema() . '<br />';
Also, change your list-right div to this:
echo '<div class="list-right" id="list_right_'.$elt->getSchema().'" style="display:none;">';
Then add the show_checkboxes function like this:
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

Finally it's correct, here's the code :
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";
}
}
Thank you for the help.

Answer 3

Use this to display the correspondent 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>
and this in your 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>
But remeber to make all list-right divs hidden by using display:none in css