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

【问题标题】：How to replace radio buttons with images? [duplicate]如何用图像替换单选按钮？ [复制]
【发布时间】：2011-07-04 00:51:22
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css forms radio-button

【解决方案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

【讨论】：

那太好了！但是，在 StackOverflow 上，仅提供链接答案 (see this meta post) 是不受欢迎的。如果您在帖子中解释了一些解决方案，或者更好的是，使用 StackOverflows 新的嵌入 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

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

祝你好运！

【讨论】：