fineder, LLC.

to derive fine.

[CSS]CSSだけでチェックボックス/ラジオボタンをクリックしたとき他要素のスタイルを変更する。


チェックボックスやラジオボタンをクリックしたときに、他の要素のスタイルを変更するときJavaScriptを使うことはよくあるかと思いますが、CSSだけで実現させることも可能です。

Jsfiddleのソースはこちら。

このサンプルでは、チェックボックス・ラジオボタンをチェックしたときに、下のDIVのスタイルが変わるようになっています。
上段のラジオボタンではDVI2,DVI3のスタイルが同時に変わります(DIV3に値がない場合)

コード

<h1>Checkbox</h1>
<input type="checkbox" id="toggle-1"><label for="toggle-1">クリックしてみてください。</label>
<div class="div1">DIV</div>

<h1>Radio Button</h1>
<input type="radio" name="q1" value="1"> Yes
<input type="radio" name="q1" value="2"> No
<input type="radio" name="q1" value="3"> Neither
<div class="div2">DIV2</div>
    
<input type="radio" name="q2" value="1"> Yes
<input type="radio" name="q2" value="2"> No
<input type="radio" name="q2" value="3"> Neither
<div class="div3">DIV3</div>
/* Default State */
div {
   background: blue;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ div.div1 {
   background: red;
}

/* Toggled State */
input[name="q1"][value="1"]:checked ~ div {
   background: red;
}
input[name="q1"][value="2"]:checked ~ div {
   background: green;
}
input[name="q1"][value="3"]:checked ~ div {
   background: yellow;
}

input[name="q2"][value="1"]:checked ~ div.div3 {
   background: red;
}
input[name="q2"][value="2"]:checked ~ div.div3 {
   background: green;
}
input[name="q2"][value="3"]:checked ~ div.div3 {
   background: yellow;
}

セレクタ(要素 ~ 要素)

「要素 ~ 要素」と書いてあげることで、その要素の後ろにある要素を選択することができます。
前の要素は取得できません。

ここでは、

input[type=checkbox]:checked ~ div.div1

上記では「inputのtype=checkbok要素のcheckedがある要素の後ろにあるdiv.div1クラス」のスタイルを選択しています。
もしdiv1を記述していなかったら、以降にあるすべてのdivに反映されてしまいます。

覚えておくと便利なテクニックだと思います。

fine:derの購読はFacebookページが便利です。