input{
BORDER-RIGHT: #fff 1px solid;
BORDER-TOP: #FFF 1px solid;
FONT-SIZE: 11pt;
color: #000000;
BORDER-LEFT: #fff 1px solid;
BORDER-BOTTOM: #666 1px solid;
FONT-FAMILY: "Arial", "sans-serif";
LINE-HEIGHT: 110%;
height:20px;
}
input[type="radio"]{border:none;}
问题：radio图片样式有三个，未选中时是空图片，选中左边一排时是叉，右边一排时是勾，两个只能有一个出现，即选中勾时叉不出现，选中叉时勾不出现。默认状态是有一个被选中的。
方法：首先我看过jquery修改checkbox样式过，于是上网查找，找到了jquery修改radio的样式。网址是：http://kawika.org/jquery/cssRadio/根据这个页面，我来做修改。
radio.js
jQuery.fn.cssRadio = function () {
var context = this;
jQuery("input[@type='radio'] + label", this)
.each( function(){
if (jQuery(this).prev().attr('name') == "radio2")
jQuery(this).addClass("checked_1");
})
.hover(
function() { $(this).addClass("over"); },
function() { $(this).removeClass("over"); }
)
.click( function() {
jQuery("input[@type='radio'] + label", context)
.each( function() {
jQuery(this)
.removeClass()
.prev()[0].checked = false;
});
if(jQuery(this).prev().attr('name') == "radio1") {
jQuery(this).addClass("checked").prev()[0].checked = true;
}
else
jQuery(this).addClass("checked_1");
})
.prev().hide();
}
index.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/radio.js"></script>
<script type="text/javascript">
$(document).ready( function () {
for(var i=1; i<3; i++)
$("#a_"+i).cssRadio();
});
</script>
<style type="text/css">
.content{
padding-left:40px;
line-height:40px;
}
.content label {
padding-left:40px;
background: url(images/radio_0.gif) no-repeat;
cursor: pointer;
display:block;
}
.content label.checked {
background: url(images/radio_1.gif) no-repeat;
color: #008800;
}
.content label.checked_1 {
background: url(images/radio_2.gif) no-repeat;
color: #008800;
}
.content label.over {
color: #0000FF;
}
</style>
</head>
<body>
<div class="content">
<div>
<p>选项组一</p>
<div id="a_1" >
<p><input type="radio" name="radio1" /><label>选项一</label></p>
<p><input type="radio" name="radio2" /><label>选项二</label></p>
</div>
</div>
<div>
<p>选项组二</p>
<div id="a_2" >
<p><input type="radio" name="radio1" /><label>选项一</label></p>
<p><input type="radio" name="radio2" /><label>选项二</label></p>
</div>
</div>
</div>
</body>
</html>