【jQuery】デザインしたチェックボックスをラジオボタンのような動きにする

選択項目を選択させるフォームの要素として、

ラジオボタンは、１つの項目を選択させるときに使われ、チェック後、チェックをはずすことはできません。

チェックボックスは１つもしくは複数選択させるときに使われ、チェック後にチェックをはずすことができます。

ラジオボタンのように１つだけ選択させるようにしたいけど、選択をはず競るようにしたい場合、

セレクトボックスという選択肢もありますが、デザイン上、選択時以外でも項目を並べて表示したい場合には、

チェックボックスをラジオボタンのように振る舞わせたいということがあります。

その方法について調べてみましたので、

ご紹介いたします。

↓コチラがDEMOです

方法
今回はプレーンなチェックボックスではなく、

装飾のための要素を追加したチェックボックスで、

この動きができる方法を考えました。

まず装飾したチェックボックスを用意します。

HTML

HTML
XHTML

<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>

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

CSS
CSS

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; }

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

jQuery
JavaScript

$(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'); } }); });

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');
}
});
});

チェックボックスを判定するときの判断が逆のように感じますが、

チェックボックスをクリックしたときにチェックがすでに動いているので、判定が逆になるのが注意ポイントです。

今回のデモでは、２つの列それぞれでラジオボタンのような動きをするようにしてみました。

WRITER

ninomiya

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。