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前端框架。当然了框架也不是那么好写,不过框架的本质就是那些基础的升级版。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
C++雾中风景10:聊聊左值,纯右值与将亡值
C++11的版本在类型系统上下了很大的功夫,添加了诸如auto,decltype,move等新的关键词来简化代码的编写与降低阅读代码的难度。为了更好的理解这些新的语义,笔者确定通过几篇文章来简单窥探一下C++类型系统的冰山一角,如果加深了对C++类型系统的理解,想必大家也能够更好的应用由C++11带给我们的新"利器"。 1.左值与右值 左值(lvalue)和右值(rvalue)是C++类型系统之中的基础概念,我们不需要了解这些基础概念,同样也能写出代码。但是如果没有弄清左右值的概念,对于许多C++高级特性的探索会一叶障目,所以笔者尝试总结一下自己对于左值与右值的理解。 在C++11之前的版本,基本沿用了C语言之中对于左值与右值的定义,说起来也很简单:“在C++之中的变量只有左值与右值两种:其中凡是可以取地址的变量就是左值,而没有名字的临时变量,字面量就是右值”。 正是因为这两种变量分别位于=的左右两侧,所以被命名为左值与右值。下面,举个栗子: int x; int y; x = 1; y = 2; x = y; y = x; // 以下代码有误 3 = x; x + y = 4; 通过...
- 下一篇
OpenJDK里的AsmTools简介
前言 https://wiki.openjdk.java.net/display/CodeTools/asmtools 在OpenJDK里有一个AsmTools项目,用来生成正确的或者不正确的java .class文件,主要用来测试和验证。 我们知道直接修改.class文件是很麻烦的,虽然有一些图形界面的工具,但还是很麻烦。 以前我的办法是用ASMifier从.class文件生成asm java代码,再修改代码,生成新的.class文件,非常麻烦。 AsmTools引入了两种表示.class文件的语法: JASM 用类似java本身的语法来定义类和函数,字节码指令则很像传统的汇编。 JCOD 整个.class用容器的方式来表示,可以很清楚表示类文件的结构。 重要的是两种语法的文件都是可以和.class互相转换的。 构建AsmTools 官方文档: https://wiki.openjdk.java.net/display/CodeTools/How+to+build+AsmTools 需要有jdk8和ant。 clone代码 hg clone http://hg.openjdk.jav...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2全家桶,快速入门学习开发网站教程
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS6,CentOS7官方镜像安装Oracle11G
- Windows10,CentOS7,CentOS8安装Nodejs环境
- Linux系统CentOS6、CentOS7手动修改IP地址