浅谈监听单选框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操作xml
Nov 04 Javascript
filemanage功能中用到的lib.js
Apr 08 Javascript
取选中的radio的值
Jan 11 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 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
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
PHP数组实例详解
2016/06/26 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
php之可变变量的实例详解
2017/09/12 PHP
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
简单谈谈python中的语句和语法
2017/08/10 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
详解Python做一个名片管理系统
2019/03/14 Python
pycharm新建一个python工程步骤
2019/07/16 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
2014自主招生自荐信策略
2014/01/27 职场文书
高校教师自荐信范文
2014/03/13 职场文书
大班幼儿评语大全
2014/04/30 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书