jquery - 放图像而不是收音机

Question

如何通过 Bootstrap 使用图像而不是单选按钮或使用其他一些插件。

是否可以通过 css 对其进行样式设置，或者 Bootstrap 是否可以做类似的事情？

Answer 1

你需要这样的东西

演示

HTML

<p>
<br>
<input id="r1" type="radio" name="rr">
<label for="r1">
<span></span>
Radio Button 1
</label>
</p>

CSS

input[type="radio"] {
    display: none;
}


input[type="radio"] + label {
    color: #F2F2F2;
    font-family: Arial,sans-serif;
    font-size: 14px;
}
input[type="radio"]:checked + label span {
    background: url("check_radio_sheet.png") no-repeat scroll -57px top transparent;
}
input[type="radio"] + label span {
    background: url("check_radio_sheet.png") no-repeat scroll -38px top transparent;
    cursor: pointer;
    display: inline-block;
    height: 19px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    width: 19px;
}

Answer 2

PrettyCheckable jQuery 插件替换了 Bootstrap 的默认复选框和单选输入，以获得更好和更有吸引力的：检查一下：链接

兼容 IE7+、Chrome、Firefox、Safari 和移动浏览器