浅谈监听单选框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中常用的SET和GET
Jan 13 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
javascript实现京东快递单号的查询效果
Nov 30 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
php的常量和变量实例详解
2017/06/27 PHP
扩展String功能方法
2006/09/22 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
python抓取京东小米8手机配置信息
2018/11/13 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python库安装速度过慢解决方案
2020/07/14 Python
浅析Python 条件控制语句
2020/07/15 Python
免税水晶:Duty Free Crystal
2019/05/13 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
接口的多继承会带来哪些问题
2015/08/17 面试题
java程序员面试交流
2012/11/29 面试题
广告学专业毕业生自荐信
2013/09/24 职场文书
主题实践活动总结
2014/05/08 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis