How to display text when a (multiple)checkbox is checked? - php

Question

This is the snippet in my index:
<p id="text" style="display:none">hello</p>
echo '<tr>';
echo '<td>'.$s['school_name'].'</td>';
echo '<td>'.$s['location'].'</td>';
echo '<td>'.$s['population'].'</td>';
echo '<td>'.$s['cost'].'</td>';
echo '<td>'.$s['topnotchers'].'</td>';
echo '<td>'.$s['rating'].'</td>';
echo '<td><input type="checkbox" name="userSelection" name="userSelection" onclick="userSelection()" value="'.$s['school_id'].'"</td>';
echo '</tr>';
}
And here is my js:
function userSelection(){
var checkBox = document.getElementsByName("userSelection")[0];
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
The text only displays when I check on row[0] since I set it to row[0]. But, what should be done if I need the function to be true to all rows when I check it?
The above code only displays text on first loop.
Is "*" going to work?
I'm a beginner, a help would be appreciated.

Answer 1

You have hard coded the index 0. So js function will run only for checkbox with zero index.
First of all change the name of checkboxes to checkbox1, checkbox2,... This will simplify the case.
Then You need to run a for loop for each checkbox. Use
`
for(i=0; i < 6; i++){
currentCheckBox = document.getElementById("checkbox"+i)
var text = document.getElementById("text");
if (currentCheckBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
`

Answer 2

You have to specify a name as an array like below,
<input type="checkbox" id="userSelection1" name="userSelection[]" onclick="userSelection()" value="">
Then only you can able to loop in javascript to check the status
var checkBoxArr = document.getElementsByName("userSelection[]");