ラジオボタンのデザインを変える

HTML のラジオボタンのデザインを画像に変える方法として、
<label> を使う方法があります。

デモ
http://yokano.jp/demo/radio/


まず、ラジオボタンを作ります。

<label><input name="default" type="radio" checked>: A</label>
<br>
<label><input name="default" type="radio">: B</label>

<label> 要素に適当なクラスを設定します。
CSS で設定したクラスの下に入っている <input> 要素を非表示にします。

<label class="radio"><input type="radio" checked>: A</label>
<br>
<label class="radio"><input type="radio">: B</label>

ラジオボタンの画像を作成します。

<label> 要素の背景画像として設定します。
チェックされている <input> 要素を持っている<label>に "on"
チェックされていない <input> 要素を持っている<label>に"off"
というクラスを設定しています。
CSS でそれぞれのクラスの background-image を設定することで
ON / OFF を表現します。
jQuery で設定します。

// JavaScript
$('.radio').each(function() {
    if($(this).find('input').is(':checked')) {
        $(this).removeClass('off').addClass('on');
    } else {
        $(this).removeClass('on').addClass('off');
    }
});

/* CSS */
.radio {
    width: 17px;
    height: 17px;
    padding-left: 20px; /* 画像を表示するために左側を開ける */
    background-repeat: no-repeat;
}

.radio.on {
    background-image: url("img/on.png");
}

.radio.off {
    background-image: url("img/off.png");
}

最後にクリックされた時にラジオボタンを切り替える処理を JS で追加します。

$('.radio input').on('change', function() {
    $('.radio').removeClass('on').addClass('off');

    if($(this).is(':checked') {
        $(this).parent().addClass('on').removeClass('off');
    }
});

以上で完了です。


参考
jQuery 簡単！チェックボックスやラジオボタンを装飾する方法（プラグイン不要） | Stronghold
http://zxcvbnmnbvcxz.com/form-improvement-2-7/