浅谈监听单选框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判断用户浏览器插件安装情况的代码
Jan 01 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 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支持断点续传的源码
2010/05/16 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
探讨php中header的用法详解
2013/06/07 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
django使用graphql的实例
2020/09/02 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
PyQt QMainWindow的使用示例
2021/03/24 Python
白酒市场开发计划书
2014/01/09 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
幼儿园感谢信
2015/01/21 职场文书
公司老总年会致辞
2015/07/30 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
2016党校培训心得体会
2016/01/07 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书