js之radio应用实例
radio和checkbox还有select，可谓是前后端常用三剑客啊！特别是checkbox和select，关于这两个今天不讲，因为在下面这几篇文章，我已经比较详细的讲解了。
SpringMVC之ajax+select下拉框交互常用方式
今天主要讲解的是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应用实例的更多相关文章
- 【转】JS大总结(带实例)
JS大总结(带实例) JavaScript事务查询综合click() 对象.click() 使对象被点击.closed 对象.closed 对象窗口是否已封闭true/falseclearTimeou ...
- JS 判断 Radio 单选按钮是否为选中状态 并弹出 值信息
今天项目中所解决的问题:JS 判断 Radio 单选按钮是否为选中状态 并弹出 值信息,一开始总是获取不到 radio 的值,后来发现逻辑存在些问题,特此共享该代码留笔记 和 分享给遇到 这类问题的 ...
- 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例
百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修 ...
- 【前端】vue.js环境配置以及实例运行简明教程
vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- js设置radio单选框值选中
html页面: <div> <label><input type="radio" name="sex" value="m ...
- js replace 与replaceall实例用法详解
这篇文章介绍了js replace 与replaceall实例用法详解,有需要的朋友可以参考一下stringObj.replace(rgExp, replaceText) 参数 stringObj 必 ...
- js高级——构造函数，实例对象和原型对象——prototype、__proto__和constructor构造器
一.前言 了解JavaScript面向对象,需要先了解三个名词: 构造函数,实例对象和原型对象. 注意:JavaScript中没有类(class)的概念,取而代之的是构造函数,两者类似却又有很大的差别 ...
- js控制radio选中
经常会遇到js控制radio选中和切换的问题 之前一直使用的是checked属性来完成的 但是现在发现这个属性有个大问题 今天就是用js给选中radio的赋值,使用的$().attr("ch ...
随机推荐
- Python import搜索的路径顺序
在程序中导入时,如下顺序 1.Python 标准库模块2.Python 第三方模块3.应用程序自定义模块 import的搜索顺序: 首先判断这个module是不是built-in即内建模块,如果是 ...
- CodeForces765A
A. Neverending competitions time limit per test:2 seconds memory limit per test:512 megabytes input: ...
- java:tag 自定义标签应用
一,tag类 1.1 TagMy标签类,格式化当前日期并输出 package com.dkt.tag; import java.io.IOException; import java.text.Sim ...
- Debian Gun/linux基本用法
添加软件源:vim /etc/apt/sources.list 在文本中添加如下内容:deb http://mirrors.163.com/debian/ stretch main non-free ...
- Mysql InnoDB的四个事务隔离级别和（分别逐级解决的问题）脏读，不可重复读，虚读
MySqlInnoDB的事务隔离级别有四个:(默认是可重复读repeatable read) 未提交读 read uncommit : 在另一个事务修改了数据,但尚未提交,在本事务中SELECT语句可 ...
- 【小程序】微信小程序绑定企业微信后怎样获取到用户信息
一.获取access_token 1.https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&corpsecret=SECRECT Cor ...
- Pig类型转换
users.data的内容如下: lisg 28 75 dengsl 24 88 强制类型转换 users = load '/users.data' fehed = foreach users gen ...
- Surface电池阈值
Surface电池阈值 笔记本电脑一般都会提供一个电池保养的软件,其主要最用是让电池在插电情况下保持在50%-80%之间,以延长电池寿命,减少电池损耗.而微软自家的Surface却一直没有这个设置. ...
- Chrome 插件推荐
我在这里就是抛砖引玉,各位开发者,有更好的插件请不要吝啬,分享出来. 希望世界和平! 翻译类 沙拉查词 目前使用,感觉挺好的,各种词典,还有统计.划词划句都可以翻译出来. JSON 格式转换 JSON ...
- Centos 安装Dokuwiki
一.前言 DokuWiki是一个开源wiki引擎程序,运行于PHP环境下.DokuWiki程序小巧而功能强大.灵活,适合中小团队和个人网站知识库的管理. 二.环境 在centos6 下安装apache ...