チェック状態のradio,checkでの要素の表示、非表示

投稿日：2019年3月31日

CSS小ネタ系。

チェックボックスやラジオと隣接するテキストボックスがあって、チェックがあった時のみ表示したい。(例えばその他の自由入力欄)

完全に隣接の場合にはCSSの+が使えるんですが、そうもいかない場合、JavaScriptでこれを書かないといけません。

その場合、入力時だけでなく、一度データを保存した時にもJSを書かなくてはいけないので、できればCSSだけでできれば・・・と思っていました。

調べたところ、~なるセレクタがあり、これを使えば完全隣接でなくても表示、非表示をCSSだけでコントロールできるようです。

参考リンク

HTMLとCSSだけ！要素の表示・非表示を切り替える方法

<style>	

/*中身を非表示にしておく*/
.hidden_box_check .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box_check input.targeted:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}
	
</style>
<div class="hidden_box_check">
	<input type="checkbox" id="label1" class="targeted"/>
	<label for="label1">クリックして表示(targeted)</label>

	<input type="checkbox" id="label2"/>
	<label for="label2">クリックして表示(non targeted)</label>

	<!--間に入ってても親(hidden_boxがきくCSSセレクタ)-->
	<div class=""></div>
	<div class=""></div>
	<div class="hidden_show">
	<!--非表示ここから-->
		<p><img src="画像"></p>
		<!--ここまで-->
	</div>
</div>

<style>

/*中身を非表示にしておく*/

.hidden_box_check .hidden_show {

height: 0;

padding: 0;

overflow: hidden;

opacity: 0;

transition: 0.8s;

}

/*クリックで中身表示*/

.hidden_box_check input.targeted:checked ~ .hidden_show {

padding: 10px 0;

height: auto;

opacity: 1;

}

</style>

<label for="label1">クリックして表示(targeted)</label>

<label for="label2">クリックして表示(non targeted)</label>

</div>

上記のように直接隣接していなくても、inputと切り替え要素が同一階層であればCSSが効きます。

checkbox,radioに関しては使えそうです。

selectも試してみましたが、optionと切り替え要素が同一階層にないので無理そうです。

ただ覚えておくと結構応用範囲はありそう。