好久没写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. 高版本api在低版本中的兼容

    直接上例子,看如何避免crash. eg:根据给出路径,获取此路径所在分区的总空间大小. 文档说明:获取文件系统用量情况,在API level 9及其以上的系统,可直接调用File对象的相关方法,以下 ...

  2. hzwer模拟赛 感冒病毒

    题目描述 Description 一种感冒病毒正在学校里传播,这所学校有n个学生,m个学生社团,每个学生可能参加了多个社团,因为同一个社团的学生交流较多,所以如果一个学生感染上感冒病毒,那么他所在的社 ...

  3. [Hadoop] 在Ubuntu系统上一步步搭建Hadoop（单机模式）

    1 Hadoop的三种创建模式 单机模式操作是Hadoop的默认操作模式,当首次解压Hadoop的源码包时,Hadoop无法了解硬件安装环境,会保守地选择最小配置,即单机模式.该模式主要用于开发调试M ...

  4. 微信公众平台推出"微信保护"提升微信账号安全 附微信保护开启教程

    前两天小美女的微信公众平台要群发消息时提示需要绑定手机才能操作,当时还以为是动态ip的问题,今天微信公众平台安全中心就说升级了,原来那时已经在公测了.微信公众平台推出"微信保护", ...

  5. idea导入maven项目，web browser远程单步调试

    问题:之前用idea14.1.3导入maven项目后,maven的dependencies不能自动解决依赖,到处都是红色的红线,看着就受不了.虽然不影响命令行编译,但是看着实在是不爽.总结下面几小步: ...

  6. CSS控制表格（table）样式

    CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}

  7. Java poi读取,写入Excel,处理row和cell可能为空的情况

    首先需要导入包 import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.poifs.filesystem.NP ...

  8. 周末娱乐一下--------恶搞windows小脚本

    下面这是个循环DOS命令,使用了C中的goto语句 echo命令式输出命令 set命令是设置命令 var是变量,初始为0 :continue是一个用于goto的标示. %var%输出变量名,%var% ...

  9. python的os模块

    1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd() 2.返回指定目录下的所有文件和目录名:os.listdir() 3.函数用来删除一个文件:os.remove() ...

  10. cf593c

    题意:有n(n<=50)个圆,给出每个圆的圆心坐标和半径r(r>=2). 求两个函数f(t),g(t),t的取值为0到50的整数,每次令x=f(t),y=g(t),产生一个51个点的集合. ...