如何使用CSS进行选择后出现输入字段

Question

我想编辑表单字段以保持隐藏状态，除非选择了上一个选项。

例如，在应用程序中有一个选项用于选择您被引用的方式。如果您选择“其他”选项，下面会出现一个新字段，询问“其他”是什么。

我在javascript/jquery中没有任何经验......如果可以用CSS来做到这一点，那将会很棒;如果没有，我可以添加到我现在学习的语言。

Answer 1

下面是一个使用兄弟选择（〜）和一个纯CSS的解决办法：检查伪选择：

#hidden { 
 
    display: none; 
 
} 
 

 
#other:checked~#hidden { 
 
    display: block; 
 
}

<div> 
 
    <label>option 1</label> 
 
    <input type="radio" name="option" /> 
 
    <label>other</label> 
 
    <input type="radio" id="other" name="option" /> 
 
    <div id="hidden"> 
 
    <span>this is a hidden field</span> 
 
    <input type="text" /> 
 
    </div> 
 
</div>