使用CSS进行选择后如何显示输入字段

Question

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

例如，在应用程序中，有一个选项可以选择您的推荐方式。如果您选择选项＆＃34;其他＆＃34;，则会在下方显示一个新字段，询问＆＃34;其他＆＃34;是。

我对javascript / jquery没有经验...如果可以用CSS做这件事就会很棒;如果不是，我可以添加到我现在正在学习的语言中。

Answer 1

这是一个使用兄弟选择器（〜）和：checked伪选择器的纯CSS解决方案：

＆＃13;

＆＃13;

#hidden {
  display: none;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;