浅谈监听单选框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 相关文章推荐
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
vue移动端实现下拉刷新
Apr 22 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
ES6 十大特性简介
Dec 09 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
B2K与车机的中波PK
2021/03/02 无线电
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
在PHP中使用redis
2013/11/04 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
js跳转页面方法总结
2014/01/29 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
Vue如何实现响应式系统
2018/07/11 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
python定时器(Timer)用法简单实例
2015/06/04 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
Python 错误和异常代码详解
2018/01/29 Python
Python列表list排列组合操作示例
2018/12/18 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
工厂门卫岗位职责
2013/11/25 职场文书
全陪导游欢迎词
2014/01/17 职场文书
广告学毕业生求职信
2014/01/30 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书