浅谈监听单选框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 相关文章推荐
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
js创建对象的方法汇总
Jan 07 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php MessagePack介绍
2013/10/06 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
jquery创建div 实现代码
2009/04/27 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
js中日期的加减法
2015/05/06 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
Python正则表达式指南 推荐
2018/10/09 Python
Python使用folium excel绘制point
2019/01/03 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
中文专业毕业生自荐书范文
2014/01/04 职场文书
工作违纪检讨书
2014/02/17 职场文书
家属联谊会致辞
2015/07/31 职场文书
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python