浅谈监听单选框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 相关文章推荐
js 复制或插入Html的实现方法小结
May 19 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
js实现简单选项卡功能
Mar 23 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常用字符串处理函数实例分析
2014/11/22 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
javascript 闭包详解
2015/07/02 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
python 获取et和excel的版本号
2009/04/09 Python
学习python的几条建议分享
2013/02/10 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
独特的python循环语句
2016/11/20 Python
python计算auc指标实例
2017/07/13 Python
python实现Virginia无密钥解密
2019/03/20 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
python解释器安装教程的方法步骤
2020/07/02 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
租房协议书怎么写
2014/04/10 职场文书
中学生运动会口号
2014/06/07 职场文书
擅自离岗检讨书
2014/09/12 职场文书
物业工程部岗位职责
2015/02/11 职场文书
绿色环保倡议书
2015/04/28 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS