0

ユーザーがラジオ ボタンをクリックするかどうかに基づいて、テキスト フィールドを表示および非表示にしようとしています。これは可能ですか？ドキュメントによると、折りたたみ可能なコンテンツにはヘッダーが必要です。

折りたたみ可能なコンテンツのない私のコードは次のとおりです。

    <fieldset data-role="controlgroup" data-mini="true">
           <input type="radio" name="radio-mini" id="radio-mini-1" value="choice-1" />
            <label for="radio-mini-1">No</label>

            <input type="radio" name="radio-mini" id="radio-mini-2" value="choice-2"  />
            <label for="radio-mini-2">Yes</label>
    </fieldset>
    <label for="textarea-a">Textarea:</label>
    <textarea name="textarea" id="textarea-a">
    </textarea>

「はい」というラベルの付いたラジオボタンをクリックすると、テキストエリアが表示されるようにしたいと思います。何か案は？

4

1 に答える 1

2

radioとが兄弟である場合textarea(そして、最新のブラウザーと互換性があることを喜んで使用している場合)、CSS を使用できます。

label[for=textarea-a],
#textarea-a {
    display: none;
}

#radio-mini-2:checked ~ label[for=textarea-a],
#radio-mini-2:checked ~ #textarea-a {
    display: block;
}​

JS フィドルのデモ。

radio上記では、要素を から削除しましたfieldset(このアプローチが機能するにはtextarea、要素が兄弟である必要があります) label 。

于 2012-07-09T16:59:16.837 に答える