浅谈监听单选框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 指导方针
Apr 05 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
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的类 功能齐全的发送邮件类
2006/10/09 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
银行开业庆典方案
2014/02/06 职场文书
大学信息公开实施方案
2014/03/09 职场文书
党日活动总结
2014/05/07 职场文书
宣传标语大全
2014/07/01 职场文书
教师四风问题整改措施
2014/09/25 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
明星邀请函
2015/02/02 职场文书
行政处罚告知书
2015/07/01 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书