我希望在选中特定单选按钮时显示隐藏的表单元素？

Question

我似乎找不到执行此操作的方法，我可以通过附近的单选按钮让它工作，但不是特定的。

这是我的一些代码，几乎可以满足我的需要：

...
Are you a supplier?:<br />
<input type="radio" name="supplier" id="supplier_no" value="0"/> No<br>
<div>
<input type="radio" name="supplier" id="supplier_yes" value="1"/> Yes
<br /><br />
<div class="languagereveal1">
What Language do you work with?:<br />
<select name="language1" value="">
...

支持它的CSS：

.languagereveal1 {
opacity: 0;
max-height: 0;
overflow: hidden;
}

input[type="radio"]:checked ~ .languagereveal1 {
opacity: 1;
max-height: 100px;
overflow: visible;
}

我想要的是 "No" 单选按钮之前的 "Yes" 单选按钮。

我认为必须有一种方法可以在 CSS 的 "input[type="radio"]" 位中指定使用 ID，我已经尝试使用我所知道的，但似乎没有是正确的，我环顾四周但找不到任何东西。

如有任何帮助，我们将不胜感激。

Answer 1

如果您想将 "Yes" 按钮移到 "No" 之前，那么您的 HTML 结构选择器将是：

#supplier_yes:checked ~ div > .languagereveal1 {
    opacity: 1;
    max-height: 100px;
    overflow: visible;
}

或者input[type="radio"]:checked ~ div > .languagereveal1也可以。

演示： http://jsfiddle.net/v3p2fju7/

我希望在选中特定单选按钮时显示隐藏的表单元素？

I want a hidden form element to appear when a SPECIFIC radio button is checked?

html

css

hidden

radio-button