好久没写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. apk 破解

    Apk破解工具:AndroidCrackTool for Mac http://www.52pojie.cn/thread-452617-1-1.html 如何防止Unity3D代码被反编译 http ...

  2. Java Persistence with Hibernate

    我们在Java中谈到持久化时,一般是指利用SQL在关系数据库中存储数据. ORM映射元数据,JPA支持XML和JDK 5.0注解两种元数据的形式,元数据描述对象和表之间的映射关系, 框架据此将实体对象 ...

  3. Pandas-多表操作

    Pandas包对多个数据表(DataFrame)的常用整合功能. 目录 merge join concat append combin_first merge 合并 pandas.merge可根据一个 ...

  4. solr suggest智能提示配置

    目录 配置文件 Java代码 遇到的问题 回到顶部 配置文件 solrconfig.xml <searchComponent name="suggest" class=&qu ...

  5. easyui-textbox回车事件

    $('#id').textbox('textbox').keydown(function (e) { if (e.keyCode == 13) { alert('enter'); } });

  6. [Java] jackson注解

    Jackson(http://jackson.codehaus.org)库是基于java语言的开源json格式解析工具.相对于javajson解析的其他库,诸如json-lib.gson包,Jacks ...

  7. 在Heroku部署时，无法加载 css，js，图片资源解决办法

    解决方案: 首先查看Gemfile, 确保group :production do 里添加了 gem "rails_12factor", '0.0.2' 然后在本地执行 rails ...

  8. Linux mkdir 创建文件夹命令

    介绍: 该命令创建指定的目录名,要求创建目录的用户在当前目录中具有写权限,并且指定的目录名不能是当前目录中已有的目录 语法: mkdir [-m] [-p] 目录名 选项介绍: -m: 对新建目录设置 ...

  9. java基础 泛型

    泛型的存在,是为了使用不确定的类型. 为什么有泛型? 1. 为了提高安全 2. 提高代码的重用率 (自动 装箱,拆箱功能) 一切好处看代码: package test1; import java.la ...

  10. C#获取命令行输出内容的方法

    获取命令行输出内容的方式有传统和异步两种方式. 传统方式: public static void RunExe(string exePath, string arguments, out string ...