保持单选按钮隐藏，在点击图像时，使用JavaScript选择它们，并设置图像的样式，使其看起来像选中的。这是加价

<div id="radio-button-wrapper">
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
</div>

和 JS

 $(".image-radio img").click(function(){
     $(this).prev().attr('checked',true);
 })

CSS

span.image-radio input[type="radio"]:checked + img{
    border:1px solid red;
}

例子:

小心!此解决方案仅支持css。

我建议你利用CSS3来做到这一点，通过隐藏默认输入单选按钮与CSS3规则:

.options input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

几天前我只是举了个例子。

JSFiddle 如何使用单选按钮的图像- Gist

这对我来说很管用:

输入(type =“广播”){ margin-right: 1 em; 外观:无; 宽:12 px; 高度:12 px; 背景图片:url(“checkbox_off.gif”); ｝ 检查输入(type =“广播”):{ 背景图片:url(“checkbox_on.gif”); ｝

保持单选按钮隐藏，在点击图像时，使用JavaScript选择它们，并设置图像的样式，使其看起来像选中的。这是加价

<div id="radio-button-wrapper">
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
</div>

和 JS

 $(".image-radio img").click(function(){
     $(this).prev().attr('checked',true);
 })

CSS

span.image-radio input[type="radio"]:checked + img{
    border:1px solid red;
}

你可以使用CSS。

HTML(仅供演示，可自定义)

<div class="button">
    <input type="radio" name="a" value="a" id="a" />
    <label for="a">a</label>
</div>
<div class="button">
    <input type="radio" name="a" value="b" id="b" />
    <label for="b">b</label>
</div>
<div class="button">
    <input type="radio" name="a" value="c" id="c" />
    <label for="c">c</label>
</div>
...

CSS

input[type="radio"] {
    display: none;
}
input[type="radio"]:checked + label {
    border: 1px solid red;
}

js小提琴

只是用一个类来隐藏一些…基于https://stackoverflow.com/a/17541916/1815624

/* HIDE RADIO */ .hiddenradio [type=radio] { position: absolute; opacity: 0; width: 0; height: 0; } /* IMAGE STYLES */ .hiddenradio [type=radio] + img { cursor: pointer; } /* CHECKED STYLES */ .hiddenradio [type=radio]:checked + img { outline: 2px solid #f00; } <div class="hiddenradio"> <label> <input type="radio" name="test" value="small" checked> <img src="http://placehold.it/40x60/0bf/fff&text=A"> </label> <label> <input type="radio" name="test" value="big"> <img src="http://placehold.it/40x60/b0f/fff&text=B"> </label> </div> <div class=""> <label> <input type="radio" name="test" value="small" checked> <img src="http://placehold.it/40x60/0bf/fff&text=A"> </label> <label> <input type="radio" name="test" value="big"> <img src="http://placehold.it/40x60/b0f/fff&text=B"> </label> </div>