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

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;
}

我想要的是“否”单选按钮之前的“是”单选按钮。

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

任何帮助将不胜感激，谢谢。

Answer 1

如果您想将“是”按钮移到“否”之前，那么您的 HTML 结构选择器将是：

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

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

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