2014/07/16
【jQuery】デザインしたチェックボックスをラジオボタンのような動きにする
選択項目を選択させるフォームの要素として、
ラジオボタンは、１つの項目を選択させるときに使われ、チェック後、チェックをはずすことはできません。
チェックボックスは１つもしくは複数選択させるときに使われ、チェック後にチェックをはずすことができます。
ラジオボタンのように１つだけ選択させるようにしたいけど、選択をはず競るようにしたい場合、
セレクトボックスという選択肢もありますが、デザイン上、選択時以外でも項目を並べて表示したい場合には、
チェックボックスをラジオボタンのように振る舞わせたいということがあります。
その方法について調べてみましたので、
ご紹介いたします。
↓コチラがDEMOです
参考にさせていただいたサイト
jQuery :: チェックボックスをラジオボタンのように振舞わせる
方法
今回はプレーンなチェックボックスではなく、
装飾のための要素を追加したチェックボックスで、
この動きができる方法を考えました。
まず装飾したチェックボックスを用意します。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <ul> <li> <label><input type="checkbox"><span class="checkboxView"></span><span class="title">オプション1</span></label> </li> <li> <label><input type="checkbox"><span class="checkboxView"></span><span class="title">オプション2</span></label> </li> <li> <label><input type="checkbox"><span class="checkboxView"></span><span class="title">オプション3</span></label> </li> <li> <label><input type="checkbox"><span class="checkboxView"></span><span class="title">オプション4</span></label> </li> <li> <label><input type="checkbox"><span class="checkboxView"></span><span class="title">オプション5</span></label> </li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | label{ display: block; position: relative; cursor: pointer; } input[type=checkbox]{ filter: alpha(opacity="1"); opacity: 0.01; MozOpacity: 0.01; position: absolute; top: 0; left: 0; } .checkboxView{ display: block; width: 36px; height: 38px; margin-right: 10px; background: url(images/ico_check.png) left top no-repeat; float: left; } .checkboxView.selected{ background-position: left bottom; } label .title{ display: block; margin-left: 30px; line-height: 38px; } |
本体のチェックボックスを限りなく透明にして隠し、
代わりに背景画像で装飾したspanをチェックボックスに見立てる方法を使いました。
通常はここでjQuery等を使い、本体のチェックボックスと見立てたチェックボックスを連動させるのですが、
今回はラジオボタンのような動きにするため、
処理をラジオボタンの動きにするjQueryと連動するようにします。
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ $(":checkbox").click(function(){ var flag = $(this).prop('checked'); //クリックしたチェックボックスが既にチェックされているかを判定 $(this).parent("label").parent("li").parent("ul").find(":checkbox").prop('checked', false); //連動させるチェックボックスのチェックを一度すべて外す $(this).parent("label").parent("li").parent("ul").find(".checkboxView").removeClass('selected'); //連動させる装飾のチェックボックスをチェックしてない状態にする(selectedというクラスを外す) if(flag){ //クリックしたチェックボックスがチェックされていた場合、チェックする $(this).prop('checked', true); $(this).next(".checkboxView").addClass('selected'); } }); }); |
チェックボックスを判定するときの判断が逆のように感じますが、
チェックボックスをクリックしたときにチェックがすでに動いているので、判定が逆になるのが注意ポイントです。
今回のデモでは、２つの列それぞれでラジオボタンのような動きをするようにしてみました。
Author Profile
SHARE
