如何使用 CSS 和 jQuery 创建自定义单选按钮
答案:使用 CSS :checked Pseudo-class with jQuery
如果尝试直接使用 background 或 border 之类的 CSS 属性来设置单选按钮的样式，它将无法正常工作，因为大多数表单元素都是浏览器的原生部分，并且不接受这么多的视觉样式。 所以我们必须找到另一种样式单选按钮的方法。
在本教程中，我们将借助 CSS 和一点点 jQuery 创建自定义单选按钮。 还有许多其他可用的解决方案，例如用于自定义单选按钮的 jQuery 插件，但它们过于复杂且不易实现。 在这里，我们将以最小的努力模拟自定义单选按钮的效果，就像魅力一样，在任何项目中都非常容易实现。 它跨浏览器高度兼容，甚至在 Internet Explorer 7 中也能完美运行。
HTML 代码
像在常规 HTML 中一样创建单选按钮并将其放置在任何位置，但不要忘记放置 name 属性，因为此解决方案取决于单选的 name 属性 按钮，如果您想将单选按钮置于实际操作中，这也是必需的。
示例
<form action="action.html" method="post">
<h3>What Is Your Favorite Web Browser</h3>
<label><input type="radio" name="browser" checked="checked" value="firefox"> Firefox</label>
<label><input type="radio" name="browser" value="chrome"> Chrome</label>
<label><input type="radio" name="browser" value="safari"> Safari</label>
</form>自定义单选按钮示例图片
为简单起见，我们使用单独的图像来指定单选按钮的不同状态，如正常、悬停、选中等，但建议在实际项目中使用此解决方案之前将所有这些图像组合成图片精灵形式 更好的性能和最小化 HTTP 请求。 但是，如果您下载此自定义单选按钮示例的源代码，它将包含简单版本和精灵版本。 让我们看一下以下图片。
CSS 代码
我们试图用 CSS 做的是在 CSS opacity 属性的帮助下隐藏默认单选按钮，并显示我们的自定义单选按钮来代替它们。
现在将以下样式规则放在 HTML 文档的 head 部分中。
示例
<style>
.custom-radio{
width: 16px;
height: 16px;
display: inline-block;
position: relative;
z-index: 1;
top: 3px;
background: url("radio.png") no-repeat;
}
.custom-radio:hover{
background: url("radio-hover.png") no-repeat;
}
.custom-radio.selected{
background: url("radio-selected.png") no-repeat;
}
.custom-radio input[type="radio"]{
margin: 1px;
position: absolute;
z-index: 2;
cursor: pointer;
outline: none;
opacity: 0;
}
</style>您可能会认为我们没有在 HTML 代码中的任何地方使用这些类； 实际上这些类将在运行时由 jQuery 添加到 DOM 中。
jQuery 代码
我们的 customRadio() 函数只是将默认单选按钮包装在 <span>.custom-radio 类。 一旦 .custom-radio 类应用于 <span> 元素，CSS 就会发挥作用，我们的自定义单选按钮图像将显示在默认单选按钮的位置。 此外，不要忘记在此脚本之前将 jQuery 包含在您的文档中。 我们在 DOM 完全加载时调用了 customRadio() 函数。
示例
<script>
function customRadio(radioName){
var radioButton = $('input[name="'+ radioName +'"]');
$(radioButton).each(function(){
$(this).wrap( "<span class='custom-radio'></span>" );
if($(this).is(':checked')){
$(this).parent().addClass("selected");
}
});
$(radioButton).click(function(){
if($(this).is(':checked')){
$(this).parent().addClass("selected");
}
$(radioButton).not(this).each(function(){
$(this).parent().removeClass("selected");
});
});
}
/* 调用 customRadio 函数 */
$(document).ready(function (){
customRadio("browser");
});
</script>提示:如果在浏览器中禁用了 JavaScript，则会出现普通单选按钮，而不是自定义单选按钮。 所以它不会以任何方式破坏你的代码。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
- 如何使用 CSS 和 jQuery 创建自定义复选框
- 如何使用 CSS 和 jQuery 创建自定义选择框
- 如何使用 jQuery 获取选定单选按钮的值
- 如何根据 jQuery 中单选按钮的选择显示和隐藏 DIV 元素
