我试图在选中两个特定单选按钮之一时显示表单的特定部分。
这是单选按钮的 HTML:
<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>
我想要的是,当Kaiser或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><p>
</div>
我已经尝试了很多解决方案,我在这里有点迷路了..
这里有一个很好用的东西,但是只有两个单选按钮:
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;
}
我真的真的被困在这里我试图让它工作至少 5 个小时..所以我想知道是否有 CSS 或 Javascript 的解决方案,但我更喜欢 CSS。
尝试仅使用一个复选框或两个 radio 时没有问题,但使用这 6 个 radio 。
到目前为止,我已经尝试了那些 input[class="hiden-wnum"]:checked
解决方案,那些 input:not(:checked) + label#something
解决方案和两三个不同的 Javascript 解决方案,但都没有奏效。
最佳答案
如果您可以更改标记,建议的解决方案:
如果您在触发表单的输入中使用类会更好,如下所示:
.triggers-form:checked + .wnum {
display: block;
}
.wnum {
display: none;
}
.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>
如果你想在选择其中任何一个时显示相同的表单,你可以这样做:
input[value=Kaiser]:checked ~ .wnum,
input[value=Dolph]:checked ~ .wnum {
display: block;
}
.wnum {
display: none;
}
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>
如果你想显示不同的表单,每个表单对应于选中的复选框,你可以这样做:
input[value=Kaiser]:checked + .wnum,
input[value=Dolph]:checked + .wnum {
display: block;
}
.wnum {
display: none;
}
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>
关于javascript - 在 css/js 中隐藏或显示复选框中的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39157368/