Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】チェックボックスの代わりにラジオボタンでも「:checked」の仕掛けは動作するか実験してみました!【実験】

 どうも!LSSです!!

 

だいぶ前の記事になりますが

というのを書いていました。

 

HTMLのフォームパーツであるチェックボックスを非表示で用意し、
チェックボックスの状態からCSSで分岐できる」
というのを利用したものですね。

 

実際のところ、CSSでユーザー操作によるオン/オフ切り替えは、この「チェックが入ってるか否か」ぐらいしか方法がないようです。

 

ですが、「HTMLのフォームパーツ」で「チェック状態にできる」ものとしては、チェックボックスの他に「ラジオボタン」があります。

 

ラジオボタンってのは、

こんな風に、「いくつかの選択肢から一つを選んで、ひとつだけ有効になる」というパーツですね。

 

今回はこの、「ラジオボタン」でも「JavaScriptを使わず、CSSだけでスイッチが作れるか」を実験してみます!

 

 

まず、ラジオボタンのHTMLタグについて

コード

<input name="name" type="radio" />
<input name="name" type="radio" />
<input name="name" type="radio" />
<input name="name" type="radio" />
<input name="name" type="radio" />
<input name="name" type="radio" />

ラジオボタンを並べるには、このようにタグを並べる事になります。

name="任意の名前"

で名前を揃えておく事で、複数のラジオボタンが「同じグループ」として扱われて、そのうち一つが選択状態になると他のラジオボタンの選択が解除される、「ひとつだけ選択」が実現する事になります。

 

 

ラジオボタンで表示する対象を選択

   
ひとつめ
ふたつめ
みっつめ
よっつめ

 

↑のラジオボタン、最初は2つめが選択された状態ですが、それ以外のラジオボタンをクリックすると、その下に表示されている文字が変わります^^

 

実験は難なく成功ですね^^

  

コードはこんな感じ

<style><!--
#m1{display:none;}
#c1:checked~#m1{display:block;}
#m2{display:none;}
#c2:checked~#m2{display:block;}
#m3{display:none;}
#c3:checked~#m3{display:block;}
#m4{display:none;}
#c4:checked~#m4{display:block;}
--></style>
<div>
<input id="c1" name="r1" type="radio" />
 <input id="c2" checked="checked" name="r1" type="radio" />
 <input id="c3" name="r1" type="radio" />
 <input id="c4" name="r1" type="radio" />
<div id="m1">ひとつめ</div>
<div id="m2">ふたつめ</div>
<div id="m3">みっつめ</div>
<div id="m4">よっつめ</div>
</div>

 

まず、HTMLとして、

<div id="m1">ひとつめ</div>

のように「idを変えながら、表示用の項目を複数」用意します。

 

そして<style>タグ内に、

#m1{display:none;}
#c1:checked~#m1{display:block;}

の2行を1セットで描きます。

「display:none;」によって「基本的には非表示」で、「#c1:checked~#m1{display:block;}」によって「c1のチェックが入っている時だけ、ブロック要素として表示する」という設定になります。

 

これを項目数分用意した上で、

<input id="c1" name="r1" type="radio" />
<input id="c2" checked="checked" name="r1" type="radio" />
<input id="c3" name="r1" type="radio" />
<input id="c4" name="r1" type="radio" />

…と、スイッチとなるラジオボタン
「nameは統一し、idはそれぞれ変更」
しながら配置して完成!!ですね^^

 

なお、2行目のようにひとつだけ「checked="checked"」を入れておくと、それが最初から選択された状態になります。

 

 

idではなくclassを使用したバージョン

ひとつめ
ふたつめ
みっつめ
よっつめ

 

やってる事は「 display:none; と display:block; 」の切り替えだけなのに、「項目数分のstyle指定を繰り返さないといけない」のを簡略化できないか?と考えてみました。

 

「どのラジオボタンがどの表示項目に対応しているか」を、前述の例ではidによって判定していましたが、「:checkedと~対象は兄弟関係でなければならない」事を逆手にとったコードが、下記になります。

 

コード

<style><!--
.n1{display:none;}
.class1:checked~.n1{display:block;}
--></style>
<div>
<input class="class1" name="r1" type="radio" />
<div class="n1">ひとつめ</div>
</div>
<div>
<input class="class1" name="r1" type="radio" />
<div class="n1">ふたつめ</div>
</div>
<div>
<input class="class1" name="r1" type="radio" />
<div class="n1">みっつめ</div>
</div>
<div>
<input class="class1" name="r1" type="radio" />
<div class="n1">よっつめ</div>
</div>

 

<style>タグの中身が、

.n1{display:none;}
.class1:checked~.n1{display:block;}

の2行だけ、と、だいぶスッキリしました^^

 

反面、HTMLタグのほうは

<div>
<input class="class1" name="r1" type="radio" />
<div class="n1">ひとつめ</div>
</div>

…と、ひとつひとつの項目を<div>で挟む事になり、少し長くなります。

 

ですが「ラジオボタンとそれに対応する表示項目がセットで書かれている」事で、このコードの扱いが「わかりやすい」というメリットがありますね^^

<style>タグの指定内容をより長々しいコードにする時は、こっちのほうが文字数が節約できそうです。

  

 

今回は実験回でした

ラジオボタンでもチェックボックスと同様の事ができる事が確認できました^^

「複数の項目からひとつを選ぶ」事ができるので、オン/オフ以外に多様な選択ができる事になります。

 

HTMLのフォームパーツには他に「ドロップダウンリスト(セレクトボックス)」があり、それもCSSからスイッチとして使えそうな気がしてたり^^

 

 

これを使ったサンプルをまた後日、作って公開してみたいと思います!

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^