最佳答案
可以添加一个带有背景的新元素，点击改变真实输入的值。
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.refRadio
{
height:30px;
width:35px;
background-image:url(http://i46.tinypic.com/w1uqza.png);
background-position:-8px center;
display:inline-block;
vertical-align:middle;
}
.refRadio.checked
{
background-position:76px center;
}
input.refRadio
{
display:none;
}
</style>
</head>
<body>
<div style=" line-height:40px; " >
<input type="radio" class="refRadio" name="name" value="Yes" /> Yes
<input type="radio" class="refRadio" name="name" value="No" /> No
<input type="radio" class="refRadio" name="name" value="No" /> No
</div>
<script type="text/javascript">
function setupRadios() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].className != "refRadio")
continue;
var input = inputs[i];
var parent = input.parentNode;
var newInput = document.createElement("span");
newInput.setAttribute("class", "refRadio");
newInput.setAttribute("data-value", input.value);
newInput.input = input;
input.newInput = newInput;
input.changed = function () {
if(!this.newInput)
return;
if (this.checked)
this.newInput.className = "refRadio checked";
else
this.newInput.className = "refRadio";
}
parent.insertBefore(newInput, input);
function click() {
this.input.checked = true;
this.className = "refRadio checked";
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.changed.apply(input);
}
}
newInput.onclick = click;
}
}
setupRadios();
</script>
</body>
</html>
关于javascript - 如何使用 CSS 和 Javascript 或 DOJO 制作自定义单选按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11774875/