javascript - After the condition of a select is met, show or hide further selects
I have the following question because I haven't found anything on the internet. I have created several selects with HTML. The select has the optiions yes / no. The first select checks whether the topic is relevant, if it is not relevant, then the remaining selects for the topic should disappear. I then send the evaluation of the selects with a button (evaluation with php), but would like to have the behavior, directly between the change from yes to no. I am open to all possibilities, be it CSS, HTML or JavaScript. In addition, all of my Selects are in a "div"
Answer
Solution:
On your checkbox, you can add onchange="changeChk()"
like this:
<input type="checkbox" id="checkId" onchange="changeChk()">
then in Javascript you can make disappear/appear other checkboxes in this function:
function changeChk() {
if (document.getElementById('checkId').checked) {
document.getElementById("otherchk").classList.remove("hidden");
} else {
document.getElementById("otherchk").classList.add("hidden");
}
with a bit of css:
.hidden {
visibility: hidden;
}
Example where I surround the checkbox with a span to make the label disappear as well:
function changeChk() {
if (!document.getElementById('checkId').checked) {
document.getElementById("spanDisappear").classList.remove("hidden");
} else {
document.getElementById("spanDisappear").classList.add("hidden");
}
}
.hidden {
visibility: hidden;
}
<input type="checkbox" id="checkId" onchange="changeChk()"> this will always be here
<span id="spanDisappear"><input type="checkbox" id="otherchk"> this will disappear</span>
Source