求助关于radio单选按钮的样式

我想设计一组单选按钮，每个按钮的图片都不同，比如一组按钮的图片 1 2 3 4 5 选择某一个数字他的样式发生变化（比如换成另外的图片）。
我在网上找了很久发现所有的改变样式都是针对一组单选而不是每一个单选按钮。请问有没有办法实现我想要的效果？
先行感谢~~

解决方案 »

  1.   

    根据ID去改变某一个啊。
    var ul = document.getElementById('你要改变的radio);
    ul.className= '样式名';
      

  2.   

    比如这个加上class也不工作？
    <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">
    <!--
    body {
    background-color: #111111;
    margin:0 10px;
    color:#999999;
    }
    #dx label {
    padding-left: 20px;
    background: url(http://kawika.org/jquery/cssRadio/unchecked.gif) no-repeat;
    }
    #dx label.checked {
    padding-left: 20px;
    background: url(http://kawika.org/jquery/cssRadio/checked.gif) no-repeat;
    color: #008800;
    }
    #dx label.over {
    color: #0000FF;
    }
    -->
    </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>
      

  3.   


    #radio1,#radio2,#radio3{width:50px; background-repeat:no-repeat;}
    #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");}#radio3{ background-image:url("images/3.gif");}
    #radio3.a{ background-image:url("images/3a.gif");} 
       <input type="radio" name="p"  id="radio1" />  
       <input type="radio" name="p"  id="radio2" />
       <input type="radio" name="p"  id="radio3" />js 我用jquery写的    $("input[name=p];radio").click(function() {
        $("input[name=p];radio").removeClass("a");
            $(this).addClass("a");
        });
      

  4.   

    能够说得具体点吗，对jquary实在不太在行