单独替换每个radio单选按钮的问题

我想设计一组单选按钮来选择数字，每个按钮就是一个数字的图片，选中以后是数字加上一个框（另外一张图片）。在网上找到的方法都是由两张图片（选中或未选中）来代替整组radio按钮。请问有没有方法能单独改变每个单选按钮的样式（不同数字的图片）。
因为我对javascript和jquery不很熟悉，这个问题困扰我好久，希望这次能有人帮我解答~~

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

比如这个例子就是用两张图片替代一组单选按钮的，可我想控制每个单选按钮的样式或者如果不行的话有没有其他能达到我目的方法。<html>
<head>
<title>jquery</title>
<script language="javascript" src="http://kawika.org/js/jquery-1.1.1.js"></script>
<script>
$(document).ready( function () {
    $("form").cssRadio();
});
jQuery.fn.cssRadio = function () {
    var context = this;

    jQuery("input[@type='radio'] + label", this)
        .each( function(){
            if ( jQuery(this).prev()[0].checked )
                jQuery(this).addClass("checked");
            })
        .hover(
            function() { $(this).addClass("over"); },
            function() { $(this).removeClass("over"); }
            )
        .click( function() {
                                               var contents = $(this).parent().parent();
            jQuery("input[@type='radio'] + label", contents)
                .each( function() {
                    jQuery(this)
                        .removeClass()
                        .prev()[0].checked = false;
                });
            jQuery(this)
                .addClass("checked")
                .prev()[0].checked = true;
            })
        .prev().hide();
}
</script>
<style type="text/css">

</style>
</head>
<body>
<h3>Example</h3>
<form id="dx">
<div>
<p><input type="radio" name="radio1"/> <label>Option 1</label></p>
<p><input type="radio" name="radio1"/> <label>Option 2</label></p>
<p><input type="radio" name="radio1"/> <label>Option 3</label></p>
<p><input type="radio" name="radio1"/> <label>Option 4</label></p>
</div>
<P>第二组</p>
<div>
<p><input type="radio" name="radio2"/> <label>Option 1</label></p>
<p><input type="radio" name="radio2"/> <label>Option 2</label></p>
<p><input type="radio" name="radio2"/> <label>Option 3</label></p>
<p><input type="radio" name="radio2"/> <label>Option 4</label></p>
</div>
</form>
</body>
</html>
用DIV代替单选按钮，用JS控制样式并且进行唯一性激活操作，再把值传到隐藏的表单里递交，不知这样行不行
多谢楼上，因为按钮可能要用ajax和后台联动，我不知道表单怎么实现~~
继续等待高手指点。
楼主，你不熟悉javascript和jquery不是你的错，可是不去学习就是你的不对了
你上次的贴大家用不同的方法也都回复你了，至少对你首帖描述的需求，大家是实现你的需求了
有人是直接用替换图src的方法的
我写的是通过增加一个选中样式的方法来实现的，
为了保证选中样式唯一，就先去除同组其它的单选按钮的样式，然后增加点击项为当前样式

$("input[name=p];radio").click(function() {
    $("input[name=p];radio").removeClass("a");//移除同组的其它单选按钮的当前样式
        $(this).addClass("a");//为当前选中项增加样式
    });
css中如果你每个单选按钮都有一个默认样式，那么每个按钮也应该增加一个唯一的选中样式
#radio1{ background-image:url("images/1.gif");}
#radio1.a{ background-image:url("images/1a.gif");}#radio2{ background-image:url("images/2.gif");}
#radio2.a{ background-image:url("images/2a.gif");}
我这样写是假定你真的需要换图，
实际上如果你只是想为图加一个边框的话，可以简化
.a {border:1px solid red;}
多谢楼上回答，我按照你说的去试了，图片显示在了单选按钮的下面，可是脚本好像没有工作，还是说我哪里弄错了？<html>
<head>
<title></title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script><style type="text/css">
#radio1,#radio2,#radio3{width:50px; background-repeat:no-repeat;}
#radio1{ background-image:url("1.png");}
#radio1.a{ background-image:url("11.png");}#radio2{ background-image:url("2.png");}
#radio2.a{ background-image:url("22.png");}#radio3{ background-image:url("images/3.gif");}
#radio3.a{ background-image:url("images/3a.gif");}}
</style><script type="text/javascript">
$("input[name=p];radio").click(function() {
    $("input[name=p];radio").removeClass("a");
        $(this).addClass("a");
    });
</script></head><body>
   <input type="radio" name="p"  id="radio1" />
   <input type="radio" name="p"  id="radio2" />
   <input type="radio" name="p"  id="radio3" />
</body>
</html>
<html>
<head>
<title></title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script><style type="text/css">
#radio1,#radio2,#radio3{width:50px; background-repeat:no-repeat;}
#radio1{ background-image:url("1.png");}
#radio1.a{ background-image:url("11.png");}#radio2{ background-image:url("2.png");}
#radio2.a{ background-image:url("22.png");}#radio3{ background-image:url("images/3.gif");}
#radio3.a{ background-image:url("images/3a.gif");}}
</style><script type="text/javascript">
$(function(){
$("input[name=p];radio").click(function() {
    $("input[name=p];radio").removeClass("a");
        $(this).addClass("a");
    });
});
</script></head><body>
   <input type="radio" name="p"  id="radio1" />
   <input type="radio" name="p"  id="radio2" />
   <input type="radio" name="p"  id="radio3" />
</body>
</html>
  先看一下你当前文件夹下有没有这个jquery-1.7.2.min.js库文件，不要复制了别人的代码就去运行