单独替换每个radio单选按钮的有关问题-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20412 次

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

------解决方案--------------------
楼主，你不熟悉javascript和jquery不是你的错，可是不去学习就是你的不对了
你上次的贴大家用不同的方法也都回复你了，至少对你首帖描述的需求，大家是实现你的需求了
有人是直接用替换图src的方法的
我写的是通过增加一个选中样式的方法来实现的，
为了保证选中样式唯一，就先去除同组其它的单选按钮的样式，然后增加点击项为当前样式

JScript code


 $("input[name=p];radio").click(function() {
    $("input[name=p];radio").removeClass("a");//移除同组的其它单选按钮的当前样式
        $(this).addClass("a");//为当前选中项增加样式
    });

------解决方案--------------------

<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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>