好久没写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. webpack入坑之旅

    转自: http://guowenfh.github.io/2016/03/24/vue-webpack-01-base/ http://guowenfh.github.io/2016/03/25/v ...

  2. php如何防止图片盗用/盗链的两种方法

    如今的互联网,采集网站非常多,很多网站都喜欢盗链/盗用别人网站的图片,这样不仅侵犯网权,还导致被盗链的网站消耗大量的流量,给服务器造成比较大的压力,本文章向大家介绍php如何防止图片盗用/盗链的两种方 ...

  3. [NHibernate]存储过程的使用（一）

    目录 写在前面 文档与系列文章 Nhibernate中使用存储过程 一个例子 总结 写在前面 上篇文章一个小插曲,分析了延迟加载是如何解决N+1 select查询问题的.这篇开始介绍在nhiberna ...

  4. cf723c Polycarp at the Radio

    Polycarp is a music editor at the radio station. He received a playlist for tomorrow, that can be re ...

  5. URL传递中文字符，特殊危险字符的解决方案（仅供参考）urldecode、base64_encode

    很多时候,我们需要在url中传递中文字符或是其它的html等特殊字符,似乎总会有各种乱,不同的浏览器对他们的编码又不一样, 对于中文,一般的做法是: 把这些文本字符串传给url之前,先进行urlenc ...

  6. Scrum Meeting ——总结

    冲刺总结 0*.燃尽图 迟来的燃尽图,别看它是最后一天掉了一堆,感觉很假,像是人为的把issues都关闭掉.其实不然,很多功能是大家平时做好,但是没整合在一起,所以没燃掉,在最后几天的整合中,通过测试 ...

  7. C和指针 第十二章 使用结构和指针

    链表是一种常用的数据结构,每个节点通过链或者指针链接在一起,程序通过间接指针访问链表中的节点. typedef struct Node { //指向下一个节点的指针 struct Node *next ...

  8. iOS开发——高级篇——音频、音乐播放（封装类）

    一.简介 简单来说,音频可以分为2种音效又称“短音频”,通常在程序中的播放时长为1~2秒在应用程序中起到点缀效果,提升整体用户体验 音乐比如游戏中的“背景音乐”,一般播放时间较长 播放音频可以使用框架 ...

  9. LCTT 三岁啦

    导读 不知不觉,LCTT 已经成立三年了,对于我这样已经迈过四张的人来说,愈发的感觉时间过得真快.这三年来,我们 LCTT 经历了很多事情,有些事情想起来仍恍如昨日. 三年前的这一天,我的一个偶发的想 ...

  10. 将字符串转换成JSON对象

    import net.sf.json.*; JSONObject jsStr = JSONObject.fromObject(params); //将字符串{"id":1} int ...