一尘不染

如何用图像替换单选按钮?

css

我想代替标准单选按钮,对每个单选按钮使用不同的图像。对于选定状态,我希望在图像周围出现边框。

我尝试为单选按钮制作图像标签,然后隐藏该按钮,但是由于某种原因,这似乎破坏了功能。

有没有更简单/更好的方法?


阅读 213

收藏
2020-05-16

共1个答案

一尘不染

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');
            }
        });
  • 演示源中的完整代码;
2020-05-16