如何使用图像作为单选按钮

Question

我想创建一个简单的启用/禁用单选按钮分组在窗体上。我曾计划使用复选标记的图像来启用和禁用x。我希望未被点击的元素变灰以清楚选择哪个元素。帮助将不胜感激。

Answer 1

请尝试以下

JQUERY

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