好久没写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. Node.js入门笔记（6）：web开发方法

    使用node进行web开发 用户上网流程: 表面上看:打开浏览器--输入网址--跳转--上网. 背后的过程是什么呢? http请求网址到指定的主机--服务器接收请求--服务器响应内容到用户浏览器--浏 ...

  2. 循环中的continue功能

    在oracle存储过程中,有时我们希望在循环中为某种情况时不做任何处理,类似于c语言中的continue,跳过本次循环:在oracle 11g中好像增加了这个关键字,在之前版本中我们可以通过如下方式来 ...

  3. Angular-Chart.js 初接触;;;

    可以先看下下面的链接,了解下, 推荐链接 准备工作 JS文件{angular.js.Chart.js.angular-chart.js} 这3个文件我的获取难易程度:Chart.js > ang ...

  4. Ubuntu14.04 lamp环境 php 无法加载mcrypt扩展

    Ubuntu14.04中安装后的LAMP环境(http://www.cnblogs.com/daiyu/p/4380657.html)中没有加载:mcrypt扩展,后期再laravel5使用中发现报错 ...

  5. JavaScript从父页面获取子页面的值（子页面又如何访问父页面）

    之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...

  6. Thrift的TCompactProtocol紧凑型二进制协议分析

    Thrift的紧凑型传输协议分析: 用一张图说明一下Thrift的TCompactProtocol中各个数据类型是怎么表示的. 报文格式编码: bool类型: 一个字节. 如果bool型的字段是结构体 ...

  7. 【Android学习】《Android开发视频教程》第二季笔记（未完待续）

    视频地址: http://study.163.com/course/courseMain.htm?courseId=207001 课时22  Activity生命周期(一) 1.如何在一个应用中添加新 ...

  8. sscanf提取字符串中的数据php

    1.需求 理解sscanf的作用 2.例子 $str = "age:30 weight:60kg"; sscanf($str,"age:%d weight:%dkg&qu ...

  9. 6个变态的C语言Hello World程序

    6个变态的C语言Hello World程序   下面的六个程序片段主要完成这些事情: 输出Hello, World 混乱C语言的源代码 下面的所有程序都可以在GCC下编译通过,只有最后一个需要动用C+ ...

  10. Python的由来

    Python的由来 Python这门语言是由C开发而来. C语言: 代码编译得到 机器码 ,机器码在处理器上直接执行,每一条指令控制CPU工作 其他语言: 代码编译得到 字节码 ,虚拟机执行字节码并转 ...