I am trying to make a certain part of a form appear when one of two specific radio buttons are checked.
Here is the HTML for the radio buttons:
<strong>Window:</strong><br>
<input type="radio" name="wname" value="Hann" checked> Hann
<input type="radio" name="wname" value="Hamming"> Hamming
<input type="radio" name="wname" value="Bartlett"> Bartlett
<input type="radio" name="wname" value="Rectangular"> Rectangular
<input type="radio" name="wname" value="Kaiser"> Kaiser
<input type="radio" name="wname" value="Dolph"> Dolph<p>
What I want, is when the Kaiser or the Dolph buttons are checked, this form part appears:
<div class="wnum">
<strong>1. Window adjust parameter (-10 - 10):</strong><br>
<select name="selectbox">
{% for i in range(-10,11): %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select><p>
</div>
I've tryed so many many solutions that i'm a little bit lost here..
Here is something that works great, but only with two radio buttons:
HTML:
<input type=radio id="show" name="group">
<input checked type=radio id="hide" name="group">
<label id="id1" for="show"><span id="id1">
<div class="wnum">
<strong>1. Window adjust parameter (-10 - 10):</strong><br>
<select name="selectbox">
{% for i in range(-10,11): %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select><p>
</div>
</span></label>
<label id="id2" for="hide"><span id="id2">
<div class="wnum">
<strong>2. Window adjust parameter (-10 - 10):</strong><br>
<select name="selectbox">
{% for i in range(-10,11): %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select><p>
</div>
CSS:
input#show:checked ~ label#id1{
display:none;
}
input#show:checked ~ label#id2{
display:block;
}
input#hide:checked ~ label#id2{
display:none;
}
input#hide:checked ~ label#id1{
display:block;
}
I'm just really really stuck here i'm trying to get it work for at least 5 hours.. so I wonder if there is a solution in CSS, or maybe in Javascript, but i prefer in CSS only.
There is no problem when trying something with just a checkbox or two radios, but with those 6 radios.
So far I've tryed those input[class="hiden-wnum"]:checked
solutions, those input:not(:checked) + label#something
solutions and two or three different Javascript solutions, but none have worked.
Suggested solution if you can change markup:
It is way better if you use a class in the inputs that trigger a form, like this:
.triggers-form:checked + .wnum {
display: block;
}
.wnum {
display: none;
}
JSFIDDLE
.triggers-form:checked + .wnum {
display: block;
}
.wnum {
display: none;
}
<strong>Window:</strong>
<br>
<input type="radio" name="wname" value="Hann" checked>Hann
<input type="radio" name="wname" value="Hamming">Hamming
<input type="radio" name="wname" value="Bartlett">Bartlett
<input type="radio" name="wname" value="Rectangular">Rectangular
<input class="triggers-form" type="radio" name="wname" value="Kaiser">Kaiser
<div class="wnum">
<strong>Kaiser Form Appears : 1. Window adjust parameter (-10 - 10):</strong>
<br>
<select name="selectbox">
{% for i in range(-10,11): %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
<input class="triggers-form" type="radio" name="wname" value="Dolph">Dolph
<div class="wnum">
<strong>Dolph Form Appears : 1. Window adjust parameter (-10 - 10):</strong>
<br>
<select name="selectbox">
{% for i in range(-10,11): %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
If you want to display the same form when either of those is selected you can do this:
input[value=Kaiser]:checked ~ .wnum,
input[value=Dolph]:checked ~ .wnum {
display: block;
}
.wnum {
display: none;
}
JSFIDDLE
input[value=Kaiser]:checked ~ .wnum,
input[value=Dolph]:checked ~ .wnum {
display: block;
}
.wnum {
display: none;
}
<strong>Window:</strong>
<br>
<input type="radio" name="wname" value="Hann" checked>Hann
<input type="radio" name="wname" value="Hamming">Hamming
<input type="radio" name="wname" value="Bartlett">Bartlett
<input type="radio" name="wname" value="Rectangular">Rectangular
<input type="radio" name="wname" value="Kaiser">Kaiser
<input type="radio" name="wname" value="Dolph">Dolph
<div class="wnum">
<strong>1. Window adjust parameter (-10 - 10):</strong>
<br>
<select name="selectbox">
{% for i in range(-10,11): %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
If you want to display different forms, each corresponding to the selected checkbox you can do this:
input[value=Kaiser]:checked + .wnum,
input[value=Dolph]:checked + .wnum {
display: block;
}
.wnum {
display: none;
}
JSFIDDLE
input[value=Kaiser]:checked + .wnum,
input[value=Dolph]:checked + .wnum {
display: block;
}
.wnum {
display: none;
}
<strong>Window:</strong>
<br>
<input type="radio" name="wname" value="Hann" checked>Hann
<input type="radio" name="wname" value="Hamming">Hamming
<input type="radio" name="wname" value="Bartlett">Bartlett
<input type="radio" name="wname" value="Rectangular">Rectangular
<input type="radio" name="wname" value="Kaiser">Kaiser
<div class="wnum">
<strong>Kaiser Form Appears : 1. Window adjust parameter (-10 - 10):</strong>
<br>
<select name="selectbox">
{% for i in range(-10,11): %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
<input type="radio" name="wname" value="Dolph">Dolph
<div class="wnum">
<strong>Dolph Form Appears : 1. Window adjust parameter (-10 - 10):</strong>
<br>
<select name="selectbox">
{% for i in range(-10,11): %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With