单独替换每个radio单选按钮的有关问题
日期：2014-05-16 浏览次数：20446 次
单独替换每个radio单选按钮的问题
我想设计一组单选按钮来选择数字，每个按钮就是一个数字的图片，选中以后是数字加上一个框（另外一张图片）。在网上找到的方法都是由两张图片（选中或未选中）来代替整组radio按钮。请问有没有方法能单独改变每个单选按钮的样式（不同数字的图片）。
因为我对javascript和jquery不很熟悉，这个问题困扰我好久，希望这次能有人帮我解答~~
------解决方案--------------------
楼主，你不熟悉javascript和jquery不是你的错，可是不去学习就是你的不对了
你上次的贴大家用不同的方法也都回复你了，至少对你首帖描述的需求，大家是实现你的需求了
有人是直接用替换图src的方法的
我写的是通过增加一个选中样式的方法 来实现的，
为了保证选中样式唯一，就先去除同组其它的单选按钮的样式，然后增加点击项为当前样式
我想设计一组单选按钮来选择数字，每个按钮就是一个数字的图片，选中以后是数字加上一个框（另外一张图片）。在网上找到的方法都是由两张图片（选中或未选中）来代替整组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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
