ラジオボタンやチェックボックスに使える「:checked」セレクタ

今回はラジオボタンやチェックボックスに使える「:checked」というセレクタを紹介します。
このセレクタは単品で使うよりも「A + B」セレクタと一緒に使うとフォームの利便性が格段にアップします。

見本はこちら
http://jsdo.it/Yukimi.Sato/mMrl

CSS

input[type=radio]:checked + label{
font-weight:bold;
color:red;
}

HTML

<form>
<input type="radio" name="check" value="test01" />
<label>ラジオボタン1</label>
<input type="radio" name="check" value="test02" />
<label>ラジオボタン2</label>
</form>

見本を見ていただくとわかりますが、チェックされたチェックボックスなりラジオボタンの隣にあるlabelに対してスタイル指定を行うことができるので、今まではcheck判定をjsで行い、合わせてクラス付与していたことが不要になります。