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

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>

If you have a select, it’s (almost) the same.

On your select, you can add onchange="changeValue()" then in Javascript you can make disappear/appear other selects.

Example:

function updateView() {
    if (document.getElementById('whateverDDL').value == "yes") {
        document.getElementById("spanDisappear").classList.remove("hidden");
    } else {
        document.getElementById("spanDisappear").classList.add("hidden");
    }
}

.hidden {
  visibility: hidden;
}

<p>
  <select id="whateverDDL" onchange="updateView()"><option value="yes">Of course</option><option value="no">Absolutely not</option></select> this will always be here
</p>
<span id="spanDisappear"><input type="text" id="otherchk"> this will disappear</span>