笔记走一波:获取单选按钮(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)的取值和点击事件的更多相关文章

  1. Jquery操作单选按钮(Radio)的取值赋值实现代码

    1.获取选中值,三种方法都可以: $('input:radio:checked').val(); $("input[type='radio']:checked").val(); $ ...

  2. 获取多<a/>标签id值的点击事件

    <li> <div class="pic"> <c:if test="${userId != null }"> <a ...

  3. jquery给div,Span, a ,button, radio 赋值取值

    jquery给div的innerHTML赋值 $("#id").html()="test"; //或者 $("#id").html(&quo ...

  4. 微信小程序单选按钮radio选中的值value的获取方法,setTimeout定时器的用法

    获取radio值的方法: func:function(e){ var val=e.detail.value;//获取radio值,类型:字符串 var val2=parseInt(val);//将字符 ...

  5. jQuery radio的取值与赋值

    取值: $("input[name='radioName']:checked").val(); 赋值: $("input[name='radioName'][value= ...

  6. ZTree 获取选中的项,jQuery radio的取值与赋值

    $("input[name='Sex']:checked").val();//取值 $("input[name='radioName'][value=2]"). ...

  7. jquery操作radio单选按钮,实现取值,动态选中,动态删除的各种方法

    本文主要讲的是在jquery里操作表单radio单选按钮的各种方法,如获取选中的radio的值,动态选中指定的radio项等. 1.获取选中的radio单选按钮的值: var v=$(":r ...

  8. JQuery select与radio的取值与赋值

    radio 取:$("input[name='NAME']:checked").val(); 赋:$("input[name='NAME'][value='指定值']&q ...

  9. jquery遍历的radio的取值问题

    html页面:<c:if test="${courseStandardVos != null }"> <c:set var="index" v ...

随机推荐

  1. 2017-11-20 崂应工作总结,含LTC3780模块分析,含运放原理

    学习了运算放大器的分类 运放的单点输入 差动模式 共模抑制输入模式 反相位比例运放 正相比例运放 电压跟随器 运放的放大比例计算 LTC3780模块的原理 因为: R19  这个电阻不确定他的接法 暂 ...

  2. 原生基础js脚本实现--在线答题系统

    全部代码在最下面----需要的直接往下翻 html方面的代码  : 正确的答案 value=s <!DOCTYPE html> <html lang="en"&g ...

  3. Jmeter- 笔记4 - 参数化 、函数

    参数化 调用变量的用法: ${变量名} 参数化第一 二种. 定义变量的两种方法: 配置元件(Config Element) -> 用户定义的变量(User Defined Variables) ...

  4. 华为4D成像雷达、智能驾驶平台MDC 810

    华为4D成像雷达.智能驾驶平台MDC 810 2020年10月底,华为发布了HI品牌,在今年2021年上海国际车展前夕,华为以 "专新致智" 为主题,举办HI新品发布会,发布了包括 ...

  5. TensorFlow优化器及用法

    TensorFlow优化器及用法 函数在一阶导数为零的地方达到其最大值和最小值.梯度下降算法基于相同的原理,即调整系数(权重和偏置)使损失函数的梯度下降. 在回归中,使用梯度下降来优化损失函数并获得系 ...

  6. 短波红外(SWIR)相机camera

    短波红外(SWIR)相机camera AVs Can't Drive Everywhere. Can TriEye's SWIR Camera Help? TriEye的短波红外(SWIR)摄像机能否 ...

  7. JUC 并发编程--07 阻塞队列版本的 生产者消费者(不使用synchronized和 lock),也有一些疑惑,最终解惑

    直接上代码: 前提是你已经 熟悉了原子类,volatile,和阻塞队列 public class JucPCdemo03 { /** * 阻塞队列的应用: 这里实现的生产者消费者,生产一个消费一个 * ...

  8. 包及权限配置&java存储机理绘制

    包及权限配置 包的声明和导入 //声明 package aa.bb.cc; public class A{;} class B{;} //即在java输出目录aa.bb.cc中放入编译后的A.clas ...

  9. JDBC连接MySQL、Oracle和SQL server的配置

    什么是JDBC 我们可以将JDBC看作是一组用于用JAVA操作数据库的API,通过这个API接口,可以连接到数据库,并且使用结构化查询语言(SQL)完成对数据库的查找,更新等操作. JDBC连接的流程 ...

  10. HDFS 05 - HDFS 常用的 Java API 操作

    目录 0 - 配置 Hadoop 环境(Windows系统) 1 - 导入 Maven 依赖 2 - 常用类介绍 3 - 常见 API 操作 3.1 获取文件系统(重要) 3.2 创建目录.写入文件 ...