浅谈监听单选框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 相关文章推荐
Jquery 学习笔记(一)
Oct 13 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
JS删除数组指定值常用方法详解
Jun 04 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
如何开始收听短波广播
2021/03/01 无线电
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
php获取后台Job管理的实现代码
2011/06/10 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
图片之间的切换
2006/06/26 Javascript
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
Python与C/C++的相互调用案例
2021/03/04 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
业务助理岗位职责
2013/11/18 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
文明城市标语
2014/06/16 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
python 详解turtle画爱心代码
2022/02/15 Python
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
css样式important规则的正确使用方式
2022/06/10 HTML / CSS