如何使用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>