radio和checkbox还有select，可谓是前后端常用三剑客啊！特别是checkbox和select，关于这两个今天不讲，因为在下面这几篇文章，我已经比较详细的讲解了。

SpringMVC之ajax+select下拉框交互常用方式

checkbox选中并通过ajax传数组到后台接收

关于checkbox自动选中

今天主要讲解的是radio。

radio应用，主要应用是单选框，实际应用也很广，比如性别、身份认证(企业或者个人)、状态等等。

还是老规矩，代码实例讲解。

1.如何获得radio的值？

var isDefaultPlan = $("input[name='isDefaultPlan']:checked").val();

通过上述代码就可以获得选中radio的值

2.radio如何赋值并选中?

if(data.resourceRatePlan.isDefault==1){

                $('input:radio[name=isDefaultPlan][value="1"]').attr("checked",true);

            }else{

                $('input:radio[name=isDefaultPlan][value="0"]').attr("checked",true);

            }

            //当status的值为1时,相当于是关闭状态

            if(data.resourceRatePlan.status==1){

                $('input:radio[name=status][value="1"]').attr("checked",true);

            }else{

                $('input:radio[name=status][value="0"]').attr("checked",true);

            }

上述代码即可实现

实际用途比较多的主要是取值和赋值。

从上面两个例子可以得出一个结论，就是都是通过jQuery选择器或者相关js判断来达到取值和赋值的目的。

jQuery本身就是js的封装。jQuery的宗旨，一直以来不变，就是那一句话:写的更少，做的更多。

jQuery教程可以参考:https://www.runoob.com/jquery/jquery-tutorial.html

另外我通常写博文也比较喜欢强调基础和原理。

下面进入，不用jQuery实现获取radio值，js和html代码示例如下:

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>test</title>

        <script>

            function check_radio(){

                var chkObjs = document.getElementsByName("radio");

                for(var i=0;i<chkObjs.length;i++){

                    if(chkObjs[i].checked){

                       alert(chkObjs[i].value);

                            break;

                        }

                    }

            }

        </script>

    </head>

    <body>

        <form action='' method='post' onsubmit='javascript:return check_radio()'>

            <input type='radio' value='1' name='radio'>A

            <input type='radio' value='2' name='radio'>B

            <input type='radio' value='3' name='radio'>C

            <input type='radio' value='4' name='radio'>D

            <input type='radio' value='5' name='radio'>E

            <input type=submit value=sub >

        </form>

    </body>

</html>

小结:领悟好javascript,对于jQuery将会更好的理解，或许以后就可以像贤心同志那样，写一个layui前端框架。当然了框架也不是那么好写，不过框架的本质就是那些基础的升级版。

js之radio应用实例的更多相关文章

  1. 【转】JS大总结(带实例)

    JS大总结(带实例) JavaScript事务查询综合click() 对象.click() 使对象被点击.closed 对象.closed 对象窗口是否已封闭true/falseclearTimeou ...

  2. JS 判断 Radio 单选按钮是否为选中状态 并弹出 值信息

    今天项目中所解决的问题:JS 判断 Radio 单选按钮是否为选中状态 并弹出 值信息,一开始总是获取不到 radio 的值,后来发现逻辑存在些问题,特此共享该代码留笔记 和 分享给遇到 这类问题的 ...

  3. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例

    百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修 ...

  4. 【前端】vue.js环境配置以及实例运行简明教程

    vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...

  5. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  6. js设置radio单选框值选中

    html页面: <div> <label><input type="radio" name="sex" value="m ...

  7. js replace 与replaceall实例用法详解

    这篇文章介绍了js replace 与replaceall实例用法详解,有需要的朋友可以参考一下stringObj.replace(rgExp, replaceText) 参数 stringObj 必 ...

  8. js高级——构造函数，实例对象和原型对象——prototype、__proto__和constructor构造器

    一.前言 了解JavaScript面向对象,需要先了解三个名词: 构造函数,实例对象和原型对象. 注意:JavaScript中没有类(class)的概念,取而代之的是构造函数,两者类似却又有很大的差别 ...

  9. js控制radio选中

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

随机推荐

  1. 数据库连接池使用（一）：使用C#数据库连接池

         一.导读      使用C#数据库连接池,连接到数据库服务器通常由几个需要软长时间的步骤组成:      1.必须与服务器进行初次连接:      2.必须分析连接字符串信息:      3 ...

  2. PHP生成缩略图（2）--等比缩略图

    分析: 当原图是横屏或竖屏的时候,希望缩略图会保持原来的比例缩放,不改变原图的完整性,即等比缩放! 此时只需确定原图的宽高,以及目标图的最大宽高,比较目标图的宽高比例与原图的宽高比例的大小,以此来判断 ...

  3. jquery3.0移除了.load()方法

    参考链接:新版jquery去掉load事件了吗? 今天也遇到了这个问题,查了一下文档,确实从3.0开始移除了load.unload.error事件方法.不过依然可以用on方法绑定这些事件. Break ...

  4. hallo world

  5. css清除浮动之天龙8步

    1.父级div定义height. 2.结尾处加空div标签clear:both. 3.父级div定义伪类:after和zoom. 4.父级div定义overflow:hidden. 5.父级div定义 ...

  6. 【Python】Java程序员学习Python（十一）— IO

    一.前言 io的内容其实还是有很多的,现在我也只是了解初步用法,当然详细内容还是应该参照官方api的: 官方api:https://docs.python.org/3/library/os.html. ...

  7. Android UI组件----用相对布局RelativeLayout做一个登陆界面

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  8. SQLSERVER中KeyHashValue的作用（下）

    SQLSERVER中KeyHashValue的作用(下) 昨天中午跟高文佳童鞋讨论了KeyHashValue的作用,到最后还是没有讨论出结果 昨天晚上德国的兄弟傅文伟做了一下实验,将实验结果交给我 感 ...

  9. Linux wget安装详解

    Wget是一个十分常用命令行下载工具,多数Linux发行版本都默认包含这个工具.如果没有安装可在 http://www.gnu.org/software/wget/wget.html下载最新版本,并使 ...

  10. Oracle EBS 应收发票取值

    SELECT ct.trx_number ,ctl.description ,fnd_flex_ext.get_segs('SQLGL' ,'GL#' ,gcc.chart_of_accounts_i ...