如何用图像替换单选按钮？ [复制]

Posted 2023-03-05

【中文标题】如何用图像替换单选按钮？ [复制]

【英文标题】：How to replace radio buttons with images? [duplicate]

【发布时间】：2011-07-04 00:51:22

【问题描述】：

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

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

我也看到了这篇文章：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/，我可能会以某种方式扭曲我的目的。

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

【参考方案1】：

演示： http://so.lucafilosofi.com/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo/

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');
            
        );

演示源中的完整代码；

【讨论】：

类似的东西，但与原型和脚本相得益彰

你不需要 scriptaculous 来做到这一点，只要原型就可以了，我认为重写我的代码以便使用它并不难。

非常感谢您的帮助，当我今天有时间逐步完成您的解决方案时，我会酌情投票/选择此作为答案

谢谢。我只是想让其他人知道演示源有点不同（更完整），因为它可以与单选按钮组一起使用。

似乎是可访问性的噩梦。另外，use prop 比attr 更好吗？

【参考方案2】：

我在网上找到的非常简单的解决方案。

http://jsbin.com/image-instead-of-radio-button/3/edit?html,css,output

【讨论】：

那太好了！但是，在 *** 上，仅提供链接答案 (see this meta post) 是不受欢迎的。如果您在帖子中解释了一些解决方案，或者更好的是，使用 ***s 新的嵌入 sn-p 来包含一个工作示例，那么您肯定会得到我的支持。 （当然留下链接作为署名）

【参考方案3】：

aSeptik 的解决方案存在一个错误，如果您单击选中的单选按钮，它会取消选中它。我通过以下调整进行了纠正。

$('a.radio-fx').on('click', function(e) 
        e.preventDefault();
        if($(this).prev('input:radio').is(':checked')) return;
        ...

所以...

$('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();
        if($(this).prev('input:radio').is(':checked')) return;
        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');
        
    );

感谢 aSeptik 提供的出色解决方案！

【参考方案4】：

是的，有！这是简单方法的示例：

不需要javascript

CSS

.radio_item
display: none !important;


.label_item 
opacity: 0.1;


.radio_item:checked + label 
opacity: 1;

HTML

<!--RADIO 1-->
<input type="radio" class="radio_item" value="" name="item" id="radio1">
<label class="label_item" for="radio1"> <img src="img_url_here"> </label>

<!--RADIO 2-->
<input type="radio" class="radio_item" value="" name="item" id="radio2">
<label class="label_item" for="radio2"> <img src="img_url_here"> </label>

FIDDLE

【讨论】：

这不考虑“选中”和“未选中”状态的单独图像。

【参考方案5】：

我还没有研究过，但这听起来很有希望： http://www.thecssninja.com/css/custom-inputs-using-css

【讨论】：

+1 用于纯 CSS 解决方案。 Lea Verou 描述了相同的方法in this presentation。

刚刚试过这个 cssninja ，它是迄今为止我见过的最好的解决方案。主要优点是它不会与您执行的其他 jquery 单选按钮操作冲突，例如 .prop('checked', true) 就像 aSeptik 的答案一样

【参考方案6】：

不久前我遇到了同样的问题，发现这个 jQuery 解决方案可以完美运行并且可以很好地降级：

http://www.adamcoulombe.info/lab/jquery/select-box/

我用它来自定义样式选择下拉菜单。这很容易实现。例如，将$('.mySelectBoxClass') 中的变量替换为$('select')，这将针对您页面上的所有选择元素。同样的规则也适用于单选按钮。

【参考方案7】：

我认为您不会找到比您添加到问题中的链接更简单的方法。这是我知道的唯一方法。我认为你有效地回答了你自己的问题。不是有那个徽章吗？

另外，这里回答了一个类似的问题：Styling checkboxes, radio buttons and dropdowns

它包含更多可以查看的预构建解决方案。如果没有更多关于你试图在视觉上完成什么的信息，我不能说它们中的任何一个是否对你有用。

祝你好运！