好久没写jquery了，昨天下午写一个效果，结果倒腾了半天还是没有解决，好在今天早上在网上询问到解决方法了，现在果断记录下。

要实现的效果就是交易方式选择时不同的交易方式下默认选中第一个选项。

如下：

支付宝，借记卡，信用卡 是三个大选项卡。

点击每个选项卡默认选中该选项卡下首个radio控件，所有选项卡下的radio的name都是相同的。

之前写的错误的是radio标签上已经添加了选中属性，但是页面上就是不显示选中。如下：（错误例子）

 <html>

     <head>

         <meta charset="utf-8" />

         <title>radio测试</title>

         <script src="jquery.min.js"></script>

         <style>

             ul{list-style-type:none;}

             ul li{width:100px;height:20px;border:1px solid silver;float:left;}

             div{ clear:both;margin:50px;}

             .payA{background:silver;}

             #payB,#payC{display:none;}

         </style>

         <script>

             $(function(){

                 $('ul li').bind('click', function(){

                     $('ul li').css('background','white');

                     $(this).css('background','silver');

                     var id = $(this).attr('class');

                     $("div").css('display','none');

                     $('#'+id).css('display','block');

                     $('input').removeAttr('checked');

                     $($('#'+id+' input').eq(0)).attr('checked','true');

                 });

             })

         </script>

     </head>

     <body>

         <ul>

             <li class="payA">支付宝</li>

             <li class="payB">借记卡</li>

             <li class="payC">信用卡</li>

         </ul>

         <form action="#" method="POST">

         <div id="payA">

             <input type="radio" name="payMethod" value="alipay" checked="true" />alipay

         </div>

         <div id="payB">

             <input type="radio" name="payMethod" value="BBC" checked="true" />BBC

             <input type="radio" name="payMethod" value="ICBC" />ICBC

             <input type="radio" name="payMethod" value="CBB" />CBB

             <input type="radio" name="payMethod" value="CBA" />CBA

             <input type="radio" name="payMethod" value="ABC" />ABC

         </div>

         <div id="payC">

             <input type="radio" name="payMethod" value="BBC2" checked="true" />BBC2

             <input type="radio" name="payMethod" value="ICBC2" />ICBC2

             <input type="radio" name="payMethod" value="CBB2" />CBB2

             <input type="radio" name="payMethod" value="CBA2" />CBA2

             <input type="radio" name="payMethod" value="ABC2" />ABC2

         </div>

         </form>

     </body>

 </html>

之后了解到 像 checked 和readonly,disabled,selected等都是有还是没有，和内容没什么关系，像这种是boolean型的使用prop来操作。

正确如下：

 <html>

     <head>

         <meta charset="utf-8" />

         <title>radio测试</title>

         <script src="jquery.min.js"></script>

         <style>

             ul{list-style-type:none;}

             ul li{width:100px;height:20px;border:1px solid silver;float:left;}

             div{ clear:both;margin:50px;}

             .payA{background:silver;}

             #payB,#payC{display:none;}

         </style>

         <script>

             $(function(){

                 $('ul li').bind('click', function(){

                     $('ul li').css('background','white');

                     $(this).css('background','silver');

                     var id = $(this).attr('class');

                     $("div").css('display','none');

                     $('#'+id).css('display','block');

                     $('input').removeAttr('checked');

                     $($('#'+id+' input').eq(0)).prop('checked',true);

                 });

             })

         </script>

     </head>

     <body>

         <ul>

             <li class="payA">支付宝</li>

             <li class="payB">借记卡</li>

             <li class="payC">信用卡</li>

         </ul>

         <form action="#" method="POST">

         <div id="payA">

             <input type="radio" name="payMethod" value="alipay" checked="true" />alipay

         </div>

         <div id="payB">

             <input type="radio" name="payMethod" value="BBC"/>BBC

             <input type="radio" name="payMethod" value="ICBC" />ICBC

             <input type="radio" name="payMethod" value="CBB" />CBB

             <input type="radio" name="payMethod" value="CBA" />CBA

             <input type="radio" name="payMethod" value="ABC" />ABC

         </div>

         <div id="payC">

             <input type="radio" name="payMethod" value="BBC2"/>BBC2

             <input type="radio" name="payMethod" value="ICBC2" />ICBC2

             <input type="radio" name="payMethod" value="CBB2" />CBB2

             <input type="radio" name="payMethod" value="CBA2" />CBA2

             <input type="radio" name="payMethod" value="ABC2" />ABC2

         </div>

         </form>

     </body>

 </html>

jquery控制radio选中的更多相关文章

  1. JQuery控制radio选中和不选中方法总结

    一.设置选中方法 代码如下: $("input[name='名字']").get(0).checked=true; $("input[name='名字']"). ...

  2. jQuery获取radio选中后的文字

    原文链接:http://blog.csdn.net/zhanyouwen/article/details/51393216 jQuery获取radio选中后的文字转载 2016年05月13日 10:3 ...

  3. js控制radio选中

    经常会遇到js控制radio选中和切换的问题 之前一直使用的是checked属性来完成的 但是现在发现这个属性有个大问题 今天就是用js给选中radio的赋值,使用的$().attr("ch ...

  4. jquery获取radio选中值及遍历

    使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项:1.& ...

  5. Jquery 操作 radio选中值

    1.获取radio选中值 1.1  $('input:radio:checked').val(); 1.2  $("input[type='radio']:checked").va ...

  6. jquery 获取radio选中的值

    如下案例:常用方法 1.获取选中值,三种方法都可以: $('input:radio:checked').val(): $("input[type='radio']:checked" ...

  7. Jquery 获取 radio选中值，select选中值

    随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox.Radiobutton .DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的操作 ...

  8. jQuery控制checkbox选中状态但是不显示选中

    问题描述:使用jQuery来控制checkbox的选中状态,但是第一次点击出现选中样式,之后点击可以看到checked的属性增加成功但是并没有选 中状态. 问题代码: function chooseA ...

  9. jQuery获取radio选中项的值【转藏】

    <title></title> <script src="js/jquery-1.7.2.min.js"></script> < ...

随机推荐

  1. 深入理解javascript原型和闭包（2）——函数和对象的关系

    上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; co ...

  2. iOS开发——高级篇——图片轮播及其无限循环效果

    平时APP中的广告位.或者滚动的新闻图片等用到的就是图片轮播这种效果,实现方式主要有两种,一种是ScrollView+ImageView,另一种则是通过CollectionView,今天总结的是Scr ...

  3. php libevent 扩展使用示例

    <?php define()); define()); class epoll{ private static $socket; public static $connections; priv ...

  4. 【GoLang】golang 中 defer 参数的蹊跷

    参考资料: http://studygolang.com/articles/7994--Defer函数调用参数的求值 golang的闭包和普通函数调用区别:http://studygolang.com ...

  5. svn 更新命令(冲突时使用theirs)

    svn cleanup svn revert -R -q ./ svn up --force --accept tc

  6. linux下ssh的几种验证方式

    ssh的认证方式有很多种,大概可以概括为以下几类: 1.pam认证方式 在配置文件/etc/ssh/sshd_config中对应参数:UsePAM 2.密钥认证方式 配置文件/etc/ssh/sshd ...

  7. Entity framwork的数据库分页

    网上查了很多,原以为多么复杂的事情,其实很简单: list = list.OrderBy(orderBy, ascending).Skip((pageIndex - 1) * pageSize).Ta ...

  8. ABAP 客户报表

    *&---------------------------------------------------------------------* *& Report  ZSDR014 ...

  9. mac下剪切文件或文件夹

    首先选中文件,按Command+C复制文件:然后按Command+Option+V:就可以把你的文件剪走了!

  10. 【目录】processing

    Processing 小代码 小代码2 小代码3 小代码4 小代码5