隐藏或显示css/js中复选框的内容

Question

当我检查两个特定单选按钮之一时,我试图使表单的某个部分出现.

这是单选按钮的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中.

尝试使用复选框或两个无线电,但使用这6个无线电时,没有问题.

到目前为止,我已经尝试了这些input[class="hiden-wnum"]:checked解决方案,这些input:not(:checked) + label#something解决方案和两个或三个不同的Javascript解决方案,但没有一个有效.

Answer 1

您可以尝试将所有内容包装在容器中以及容器的输入（或标签）切换类上。基于这个类，你可以切换display: block或不切换到隐藏section，或者使用 jquery 做一些简单的事情：

<input type="radio" id="open-section" />
<input type="radio" id="something-else" />
<input type="radio" id="some-more" />

<div id="section" style="display: none;"></div>

$('#open-section').click(function () {
    $("#section").show();
});