javascript - 画像をラジオボタンとして使用する方法

Question

フォーム上に単純な有効/無効のラジオボタングループを作成しようとしています。有効とx無効のチェックマークの画像を使用することを計画していました。クリックされなかった要素を灰色にして、どちらが選択されているかを明確にします。助けていただければ幸いです。

Answer 1

以下を試してください

Jクエリ

$(function() {
    $('input:radio').each(function() {
        $(this).hide();
        $('<a class="radio-fx" href="#"><div class="radio"></div></a>').insertAfter(this);
    });
    $('.radio-fx').live('click',function(e) {
        e.preventDefault();
          var $check = $(this).prev('input');
          $('.radio-fx div').attr('class','radio');
          $(this).find('div').attr('class','radio-checked');          
          $check.attr('checked', true);
    });
});

CSS

.radio {
    background: url(radiobutton_no.png) no-repeat;
    width: 16px;
    height: 16px;
}
.radio-checked {
    background: url(radiobutton_yes.png) no-repeat;
    width: 16px;
    height: 16px;
}