jQuery 簡単！チェックボックスやラジオボタンを装飾する方法（プラグイン不要）
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんばんは。Toshikuraです。今回のTipsは【簡単！チェックボックスやラジオボタンを装飾する方法】です。プラグインを使用しても良いのですが、ここでは設定の手間や容量が気になるので使用しません。実装方法はとても簡単ですのでぜひお試しください。
発展編
20. チェックボックスのデザイン
画像の準備
まずはチェックボックスに使用する画像を準備します。チェック時を上、非チェック時を下と垂直に並べます。基本は画像ボタンの作り方と同様です。
基本設定 – 背景画像へ設置
画像を準備したらチェックボックスを囲っているラベルに背景画像として設置します。その際基点を左上に設定し、リピートを無しにします。
HTML
<label class="cbxbd"><input type="checkbox"/>Check 1</label>
CSS
.cbxbd{
background:url(images/demo_check.png) no-repeat left top;
height: 28px;
line-height: 28px;
display: block;
padding: 0 0 0 15px;
cursor: pointer;
overflow: hidden;
}
| 設定前 | 設定後（途中経過） |
チェックボックスの透過とJSの設定
このままですと、チェックボックスが上にかぶっています。ですのでopacityプロパティを使って重なっているパーツを透明にします。最後にjQueryを使いチェックボックスをチェックした際に、背景画像の基点が左上⇒左下になるように記述します。これでチェック時には下の画像、非チェック時には上の画像が表示されるようになります。
JS
$(function () {
$("input[type=’checkbox’]").change(function(){
if($(this).is(":checked")){
$(this).parent().addClass("c_on");
}else{
$(this).parent().removeClass("c_on");
}
});
});
CSS
input[type=’checkbox’]{
filter: alpha(opacity=0); -moz-opacity:0; opacity:0;
position: absolute;
}
.cbxbd{
background:url(images/demo_check.png) no-repeat left top;
height: 28px;
line-height: 28px;
display: block;
padding: 0 0 0 15px;
cursor: pointer;
overflow: hidden;
}
.c_on{background-position:left bottom;}
対応ブラウザ
IE7~IE9,Chrome,Safari,Firefox,Opera
21. ラジオボタンのデザイン
画像の準備
まずはラジオボタンに使用する画像を準備します。チェック時を上、非チェック時を下と垂直に並べます。基本は画像ボタンの作り方と同様です。
各種設定
基本的な設定は上記に書いているチェックボックスと同様です。詳しくはチェックボックスの設定をご確認ください。以下設定用のコードになります。
HTML
<label class="crobd"><input type="radio" name="n1"/>Check 1</label>
<label class="crobd"><input type="radio" name="n1"/>Check 2</label>
CSS
input[type=’radio’]{
filter: alpha(opacity=0); -moz-opacity:0; opacity:0;
position: absolute;
}
.crobd{
background:url(images/demo_radio.png) no-repeat left top;
height: 28px;
line-height: 28px;
display: block;
padding: 0 0 0 15px;
cursor: pointer;
overflow: hidden;
}
.c_on{background-position:left bottom;}
JS
$(function () {
$("input[type=’radio’]").change(function(){
if($(this).is(":checked")){
$(‘.crobd’).removeClass("c_on");
$(this).parent().addClass("c_on");
}else{
$(this).parent().removeClass("c_on");
}
});
});
対応ブラウザ
IE7~IE9,Chrome,Safari,Firefox,Opera
以上になります。デモでは今回のtipsを適応した例が確認できますので、もしよろしければ合わせてご確認ください。