浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)


Posted in Javascript onSeptember 10, 2019

若是只引用jquery的话,监听单选按钮改变事件如下:

<input type="radio" name="sex" checked="checked" value="1">男
<input type="radio" name="sex" value="2">女
$(document).ready(function() { 
 $('input[type=radio][name=sex]').change(function() {
  if (this.value == '1') { 
   alert("这是个男孩"); 
  } else if (this.value == '2') { 
   alert("这是个女孩"); 
  } 
 }); 
});

注意:如果是引用了layui的样式和方法,则上面的监听事件失效,被layui接管了,所以应该如下写法:

layui.use(['form', 'element', 'laydate'], function(){
 var jQuery = layui.jquery
 ,layer = layui.layer
 ,form = layui.form()
 ,element = layui.element();

 form.on("radio(sex)", function (data) {
  var sex = data.value;
  if (this.value == '1') { 
   alert("这是个男孩"); 
  } else if (this.value == '2') { 
   alert("这是个女孩"); 
  } 
 });
});

以上这篇浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript写的日历类(基于pj)
Dec 28 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 #Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 #Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 #Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 #Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 #Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 #jQuery
Elasticsearch实现复合查询高亮结果功能
Sep 10 #Javascript
You might like
php中并发读写文件冲突的解决方案
2013/10/25 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
js选项卡的制作方法
2017/01/23 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
python正则表达式的使用
2017/06/12 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
医学生自荐信
2013/12/03 职场文书
授权委托书格式模板
2014/04/03 职场文书
环保标语大全
2014/06/12 职场文书
毕业证委托书范文
2014/09/26 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
运动会闭幕词
2015/01/28 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
行政处罚听证告知书
2015/07/01 职场文书
被委托人身份证明
2015/08/07 职场文书