图像而不是单选按钮[重复]答案

【问题标题】：images instead of radio buttons [duplicate]图像而不是单选按钮[重复]
【发布时间】：2012-06-13 16:27:24
【问题描述】：

我一直在尝试自定义我的单选按钮，为此我想知道如何简单地在单选按钮的选中和未选中事件上添加图像，它应该对所有浏览器都是通用的，我尝试了各种功能但都给出了结果，但是有一定的缺陷，我正在尝试做的是 css，它可以按照指定的方式转换所有 raio 按钮，请让我知道如何仅使用 css 方法来完成（我已经用 jquery 做到了，但缺陷需要 eash 的标签单选按钮并始终保持向左浮动）

请帮助谢谢，

【问题讨论】：

标签： html css forms webforms

【解决方案1】：

为此使用 CSS：

input[type="radio"] {
    display:inline-block;
    height:20px;
    text-indent:-9999px;
    width:20px;
}

input[type="radio"], .notchecked {
    background:url("notchecked.png") 0 0 no-repeat;
}

input[type="radio"]:checked, .checked {
    background:url("checked.png") 0 0 no-repeat;
}

如果您希望旧版浏览器使用它，您可以使用 jquery 添加它：

$("input[type=radio]").on("change", function(){
    if($(this).is(":checked")) {
        $(this).addClass("checked");
    }
    else {
        $(this).removeClass("checked");
    }
});
$("input[type=radio]:checked").addClass("checked");

和html：

<input type="radio" class="notchecked" value="true" />

【讨论】：

使用 jquery 是否必须包含任何头文件？
此外，为了将它用于单选按钮，我必须用单选按钮替换复选框？
@softgenic 你是对的我更新了代码。您必须将 jquery 添加到您的页面，是的。