浅谈监听单选框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 相关文章推荐
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
利用python分析access日志的方法
Oct 26 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 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
用session做客户验证时的注意事项
2006/10/09 PHP
php4与php5的区别小结(配置异同)
2011/12/20 PHP
探讨php中header的用法详解
2013/06/07 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
python使用nntp读取新闻组内容的方法
2015/05/08 Python
python实现的简单抽奖系统实例
2015/05/22 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
编辑个人求职信范文
2013/09/21 职场文书
后勤副校长自我鉴定
2013/10/13 职场文书
装饰资料员岗位职责
2013/12/30 职场文书
五年级音乐教学反思
2014/02/06 职场文书
利群广告词
2014/03/20 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs