单选按钮(radio)的取值和点击事件
笔记走一波:获取单选按钮(radio)的选中值,以及它的点击事件的实现
首先要引入Jquery
<script type="text/javascript" src="js/jquery-3.1.1.min.js">
下面是一个简单的表单
<!-- 单选按钮的取值和点击事件-->
<form action="#" method="post">
性别:
<input type="radio" name="sex" value="male" checked="true" />男
<input type="radio" name="sex" value="female" />女 <input type="button" id="getSexBtn" value="获取性别" />
</form>
就这么丑啊!就这么丑!
需求一:点击“获取性别”按钮,使用alert()弹出选中按钮的value值
// 通过type="radio"获取选中的值
$("#getSexBtn").click(function(){
var sex = $("input[type=radio]:checked").val();
alert(sex);
}); // 通过name="sex"获取选中的值
$("#getSexBtn").click(function(){
var sex = $("input[name=sex]:checked").val();
alert(sex);
});
需求二:选中“男”或者“女”时,弹出选中的按钮的value值,即按钮的点击事件
// 点击单选按钮后触发,即,我们选择“男”时,触发一个事件,弹出选中的值
$("input[name=sex]").click(function(){
var sex = $(this).val();
alert(sex);
});
不积跬步,无以至千里。
单选按钮(radio)的取值和点击事件的更多相关文章
- Jquery操作单选按钮(Radio)的取值赋值实现代码
1.获取选中值,三种方法都可以: $('input:radio:checked').val(); $("input[type='radio']:checked").val(); $ ...
- 获取多<a/>标签id值的点击事件
<li> <div class="pic"> <c:if test="${userId != null }"> <a ...
- jquery给div,Span, a ,button, radio 赋值取值
jquery给div的innerHTML赋值 $("#id").html()="test"; //或者 $("#id").html(&quo ...
- 微信小程序单选按钮radio选中的值value的获取方法,setTimeout定时器的用法
获取radio值的方法: func:function(e){ var val=e.detail.value;//获取radio值,类型:字符串 var val2=parseInt(val);//将字符 ...
- jQuery radio的取值与赋值
取值: $("input[name='radioName']:checked").val(); 赋值: $("input[name='radioName'][value= ...
- ZTree 获取选中的项,jQuery radio的取值与赋值
$("input[name='Sex']:checked").val();//取值 $("input[name='radioName'][value=2]"). ...
- jquery操作radio单选按钮,实现取值,动态选中,动态删除的各种方法
本文主要讲的是在jquery里操作表单radio单选按钮的各种方法,如获取选中的radio的值,动态选中指定的radio项等. 1.获取选中的radio单选按钮的值: var v=$(":r ...
- JQuery select与radio的取值与赋值
radio 取:$("input[name='NAME']:checked").val(); 赋:$("input[name='NAME'][value='指定值']&q ...
- jquery遍历的radio的取值问题
html页面:<c:if test="${courseStandardVos != null }"> <c:set var="index" v ...
随机推荐
- 2017-11-20 崂应工作总结,含LTC3780模块分析,含运放原理
学习了运算放大器的分类 运放的单点输入 差动模式 共模抑制输入模式 反相位比例运放 正相比例运放 电压跟随器 运放的放大比例计算 LTC3780模块的原理 因为: R19 这个电阻不确定他的接法 暂 ...
- 原生基础js脚本实现--在线答题系统
全部代码在最下面----需要的直接往下翻 html方面的代码 : 正确的答案 value=s <!DOCTYPE html> <html lang="en"&g ...
- Jmeter- 笔记4 - 参数化 、函数
参数化 调用变量的用法: ${变量名} 参数化第一 二种. 定义变量的两种方法: 配置元件(Config Element) -> 用户定义的变量(User Defined Variables) ...
- 华为4D成像雷达、智能驾驶平台MDC 810
华为4D成像雷达.智能驾驶平台MDC 810 2020年10月底,华为发布了HI品牌,在今年2021年上海国际车展前夕,华为以 "专新致智" 为主题,举办HI新品发布会,发布了包括 ...
- TensorFlow优化器及用法
TensorFlow优化器及用法 函数在一阶导数为零的地方达到其最大值和最小值.梯度下降算法基于相同的原理,即调整系数(权重和偏置)使损失函数的梯度下降. 在回归中,使用梯度下降来优化损失函数并获得系 ...
- 短波红外(SWIR)相机camera
短波红外(SWIR)相机camera AVs Can't Drive Everywhere. Can TriEye's SWIR Camera Help? TriEye的短波红外(SWIR)摄像机能否 ...
- JUC 并发编程--07 阻塞队列版本的 生产者消费者(不使用synchronized和 lock),也有一些疑惑,最终解惑
直接上代码: 前提是你已经 熟悉了原子类,volatile,和阻塞队列 public class JucPCdemo03 { /** * 阻塞队列的应用: 这里实现的生产者消费者,生产一个消费一个 * ...
- 包及权限配置&java存储机理绘制
包及权限配置 包的声明和导入 //声明 package aa.bb.cc; public class A{;} class B{;} //即在java输出目录aa.bb.cc中放入编译后的A.clas ...
- JDBC连接MySQL、Oracle和SQL server的配置
什么是JDBC 我们可以将JDBC看作是一组用于用JAVA操作数据库的API,通过这个API接口,可以连接到数据库,并且使用结构化查询语言(SQL)完成对数据库的查找,更新等操作. JDBC连接的流程 ...
- HDFS 05 - HDFS 常用的 Java API 操作
目录 0 - 配置 Hadoop 环境(Windows系统) 1 - 导入 Maven 依赖 2 - 常用类介绍 3 - 常见 API 操作 3.1 获取文件系统(重要) 3.2 创建目录.写入文件 ...