单选框radio改变事件详解(用的jquery的radio的change事件)
单选框radio改变事件详解(用的jquery的radio的change事件)
一、总结
1、用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radio选择不同选项的时候恰巧是值发生改变。
二、单选框radio改变事件详解
<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer
$(document).ready(function() {
$('input[type=radio][name=bedStatus]').change(function() {
if (this.value == 'allot') {
alert("Allot Thai Gayo Bhai");
}
else if (this.value == 'transfer') {
alert("Transfer Thai Gayo");
}
});
});
三、单选框选择不同的选项登录的账号密码自动改变
<form class="am-form tpl-form-line-form" action="" method="post"> <div class="am-form-group">
<label class="am-radio-inline tpl-login-remember-me">
<input class="tpl-form-input" type="radio" name="status" id="student" value="0" checked="checked">Student
</label>
<label class="am-radio-inline tpl-login-remember-me">
<input class="tpl-form-input" type="radio" name="status" id=teacher value="1" >Teacher
</label>
</div> <div class="am-form-group">
<input type="text" class="tpl-form-input" id="username" name="username" required="" value="" placeholder="username"> </div> <div class="am-form-group">
<input type="password" class="tpl-form-input" id="password" name="password" required="" value="" placeholder="password"> </div> <!-- 验证码 -->
<!-- <div class="am-form-group">
<input type="text" class="tpl-form-input" id="user-name" name="code" placeholder="CAPTCHA">
</div>
<div class="am-form-group">
<img width="100%" style="cursor: pointer" src="{:captcha_src()}" alt="captcha" onclick="this.src='{:captcha_src()}?'+Math.random();" />
</div> -->
<!--End 验证码 --> <div class="am-form-group tpl-login-remember-me">
<input id="remember-me" type="checkbox">
<label for="remember-me"> 记住密码
</label>
<label style="margin-left: 15px">
<a href="{:url('login/register')}"> 注册</a>
</label> </div> <div class="am-form-group"> <button type="submit" class="am-btn am-btn-primary am-btn-block tpl-btn-bg-color-success tpl-login-btn">提交</button> </div>
</form>
js
<script>
$(document).ready(function() {
$('input[type=radio][name=status]').change(function() {
if (this.value == '0') {
$("#username").val("student");
$("#password").val("student");
}
else if (this.value == '1') {
$("#username").val("teacher");
$("#password").val("teacher");
}
});
});
</script>
单选框radio改变事件详解(用的jquery的radio的change事件)的更多相关文章
- Android 广播大全 Intent Action 事件详解
Android 广播大全 Intent Action 事件详解 投稿:mrr 字体:[增加 减小] 类型:转载 时间:2015-10-20我要评论 这篇文章主要给大家介绍Android 广播大全 In ...
- DOM——事件详解
事件 事件:触发-响应机制 事件三要素 事件源:触发(被)事件的元素 事件名称: click 点击事件 事件处理程序:事件触发后要执行的代码(函数形式) 事件的基本使用 var box = docu ...
- JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- JavaScript事件详解-zepto的事件实现
zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...
- 【转载】C# 中的委托和事件(详解:简单易懂的讲解)
本文转载自http://www.cnblogs.com/SkySoot/archive/2012/04/05/2433639.html C# 中的委托和事件(详解) C# 中的委托和事件 委托和事件在 ...
- 用css实现html中单选框样式改变
我们都知道,input的单选框是一个小圆框,不能直接更改样式.但是我们在很多网页中看到的单选框样式可不仅限于默认的那个样式(看上去没啥新意,也比较丑).那么,接下来我将介绍下如何实现该功能. 首先, ...
- SQL Server 默认跟踪(Trace)捕获事件详解
SQL Server 默认跟踪 -- 捕获事件详解 哪些具体事件默认跟踪文件能够捕获到? --returns full list of events SELECT * FROM sys.trace_e ...
- react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)
第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
随机推荐
- selenium+python自动化处理时间控件
尝试编写12306网站查询余票信息的自动化脚本时,碰到日期选择的问题,此处做一下记录:
- JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
本文实例总结了JS数组排序技巧.分享给大家供大家参考,具体如下: 1.冒泡排序 var temp = 0; for (var i = 0; i < array.length; i++) { fo ...
- 【例题 8-10 UVA - 714】 Copying Books
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 二分最后的最大值的最小值. 得到ans 然后从后往前尽量划分. 如果发现不够分成k个. 那么就从第一个开始接着分restk个(每隔1 ...
- Spring学习总结(10)——Spring JMS---三种消息监听器
消息监听器MessageListener 在spring整合JMS的应用中我们在定义消息监听器的时候一共可以定义三种类型的消息监听器,分别是MessageListener.SessionAwareMe ...
- 洛谷——P3819 松江1843路
https://www.luogu.org/problem/show?pid=3819 题目描述 涞坊路是一条长L米的道路,道路上的坐标范围从0到L,路上有N座房子,第i座房子建在坐标为x[i]的地方 ...
- [转]Linq使用心得——SelectMany替代二重foreach循环
本篇记录了Linq学习的心得,较为浅显,各位大牛请轻拍. 学习Linq其实已经很久了,但是一直没有使用的习惯,故水平也始终没有提高.近来刻意强迫自己用Linq来替代C# 2.0的一些写法.这里有一些心 ...
- Cocos2d-x学习笔记(一)HelloWorld
原创文章,转载请注明出处:http://blog.csdn.net/sfh366958228/article/details/38656755 前言 正式来公司实习已有一月,前一月主要是看了<C ...
- POJ 2718 Smallest Difference 枚举
http://poj.org/problem?id=2718 题目大意: 给你一些数字(单个),不会重复出现且从小到大.他们可以组成两个各个位上的数字均不一样的数,如 0, 1, 2, 4, 6 ,7 ...
- Java BigDecimal的基本使用方法
1.对于不需要任何准确计算精度的数字可以直接使用float或double,但是如果需要精确计算的结果,则必须使用BigDecimal类 2.运算速度比一般的+.-.*./要快 3.基本方 法描 述 ...
- BP神经网络公式推导及实现(MNIST)
BP神经网络的基础介绍见:http://blog.csdn.net/fengbingchun/article/details/50274471,这里主要以公式推导为主. BP神经网络又称为误差反向传播 ...