首页 > 代码库 > jquery控制radio选中
jquery控制radio选中
好久没写jquery了，昨天下午写一个效果，结果倒腾了半天还是没有解决，好在今天早上在网上询问到解决方法了，现在果断记录下。
要实现的效果就是交易方式选择时不同的交易方式下默认选中第一个选项。
如下：
支付宝，借记卡，信用卡 是三个大选项卡。
点击每个选项卡默认选中该选项卡下首个radio控件，所有选项卡下的radio的name都是相同的。
之前写的错误的是radio标签上已经添加了选中属性，但是页面上就是不显示选中。如下：（错误例子）
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>radio测试</title> 5 <script src="jquery.min.js"></script> 6 <style> 7 ul{list-style-type:none;} 8 ul li{width:100px;height:20px;border:1px solid silver;float:left;} 9 div{ clear:both;margin:50px;}10 .payA{background:silver;}11 #payB,#payC{display:none;}12 </style>13 <script>14 $(function(){15 16 $(‘ul li‘).bind(‘click‘, function(){17 $(‘ul li‘).css(‘background‘,‘white‘);18 $(this).css(‘background‘,‘silver‘);19 var id = $(this).attr(‘class‘);20 $("div").css(‘display‘,‘none‘);21 $(‘#‘+id).css(‘display‘,‘block‘);22 23 $(‘input‘).removeAttr(‘checked‘);24 $($(‘#‘+id+‘ input‘).eq(0)).attr(‘checked‘,‘true‘);25 });26 27 })28 </script>29 </head>30 <body>31 <ul>32 <li class="payA">支付宝</li>33 <li class="payB">借记卡</li>34 <li class="payC">信用卡</li>35 </ul>36 <form action="#" method="POST">37 <div id="payA">38 <input type="radio" name="payMethod" value="alipay" checked="true" />alipay39 </div>40 <div id="payB">41 <input type="radio" name="payMethod" value="BBC" checked="true" />BBC42 <input type="radio" name="payMethod" value="ICBC" />ICBC43 <input type="radio" name="payMethod" value="CBB" />CBB44 <input type="radio" name="payMethod" value="CBA" />CBA45 <input type="radio" name="payMethod" value="ABC" />ABC46 </div>47 <div id="payC">48 <input type="radio" name="payMethod" value="BBC2" checked="true" />BBC249 <input type="radio" name="payMethod" value="ICBC2" />ICBC250 <input type="radio" name="payMethod" value="CBB2" />CBB251 <input type="radio" name="payMethod" value="CBA2" />CBA252 <input type="radio" name="payMethod" value="ABC2" />ABC253 </div>54 </form>55 </body>56 </html>
之后了解到 像 checked 和readonly,disabled,selected等都是有还是没有，和内容没什么关系，像这种是boolean型的使用prop来操作。
正确如下：
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>radio测试</title> 5 <script src="jquery.min.js"></script> 6 <style> 7 ul{list-style-type:none;} 8 ul li{width:100px;height:20px;border:1px solid silver;float:left;} 9 div{ clear:both;margin:50px;}10 .payA{background:silver;}11 #payB,#payC{display:none;}12 </style>13 <script>14 $(function(){15 16 $(‘ul li‘).bind(‘click‘, function(){17 $(‘ul li‘).css(‘background‘,‘white‘);18 $(this).css(‘background‘,‘silver‘);19 var id = $(this).attr(‘class‘);20 $("div").css(‘display‘,‘none‘);21 $(‘#‘+id).css(‘display‘,‘block‘);22 23 $(‘input‘).removeAttr(‘checked‘);24 $($(‘#‘+id+‘ input‘).eq(0)).prop(‘checked‘,true); 25 });26 27 })28 </script>29 </head>30 <body>31 <ul>32 <li class="payA">支付宝</li>33 <li class="payB">借记卡</li>34 <li class="payC">信用卡</li>35 </ul>36 <form action="#" method="POST">37 <div id="payA">38 <input type="radio" name="payMethod" value="alipay" checked="true" />alipay39 </div>40 <div id="payB">41 <input type="radio" name="payMethod" value="BBC"/>BBC42 <input type="radio" name="payMethod" value="ICBC" />ICBC43 <input type="radio" name="payMethod" value="CBB" />CBB44 <input type="radio" name="payMethod" value="CBA" />CBA45 <input type="radio" name="payMethod" value="ABC" />ABC46 </div>47 <div id="payC">48 <input type="radio" name="payMethod" value="BBC2"/>BBC249 <input type="radio" name="payMethod" value="ICBC2" />ICBC250 <input type="radio" name="payMethod" value="CBB2" />CBB251 <input type="radio" name="payMethod" value="CBA2" />CBA252 <input type="radio" name="payMethod" value="ABC2" />ABC253 </div>54 </form>55 </body>56 </html>
jquery控制radio选中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。