我想代替标准单选按钮,对每个单选按钮使用不同的图像。对于选定状态,我希望在图像周围出现边框。
我尝试为单选按钮制作图像标签,然后隐藏该按钮,但是由于某种原因,这似乎破坏了功能。
有没有更简单/更好的方法?
jQuery
$('input:radio').hide().each(function() { $(this).attr('data-radio-fx', this.name); var label = $("label[for=" + '"' + this.id + '"' + "]").text(); $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '' ) + ' data-radio-fx="'+this.name+'" class="radio-fx" href="#">'+ '<span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this); }); $('a.radio-fx').on('click', function(e) { e.preventDefault(); var unique = $(this).attr('data-radio-fx'); $("a[data-radio-fx='"+unique+"'] span").attr('class','radio'); $(":radio[data-radio-fx='"+unique+"']").attr('checked',false); $(this).find('span').attr('class','radio-checked'); $(this).prev('input:radio').attr('checked',true); }).on('keydown', function(e) { if ((e.keyCode ? e.keyCode : e.which) == 32) { $(this).trigger('click'); } });