浅谈监听单选框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学习4 浏览器的事件模型
Feb 07 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
纯js实现隔行变色效果
Nov 29 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 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 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
利用pyecharts实现地图可视化的例子
2019/08/12 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
python 多进程队列数据处理详解
2019/12/23 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
python实现超级玛丽游戏
2020/03/18 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
Python学习之os模块及用法
2020/06/03 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
数控专业毕业生求职信范文
2013/09/21 职场文书
工厂仓管员岗位职责
2014/01/01 职场文书
函授生自我鉴定
2014/03/25 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
户外拓展训练感想
2015/08/07 职场文书
离婚协议书范文2016
2016/03/18 职场文书
社区结对共建协议书
2016/03/23 职场文书
聊一聊python常用的编程模块
2021/05/14 Python