浅谈监听单选框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 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
js实现文章目录索引导航(table of content)
May 10 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 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实现阳历到农历转换的类实例
2015/03/07 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
python的pdb调试命令的命令整理及实例
2017/07/12 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
python爬虫之遍历单个域名
2019/11/20 Python
python time()的实例用法
2020/11/03 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
技术学校毕业生求职信分享
2013/12/02 职场文书
个人评语大全
2014/05/04 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
python图像处理 PIL Image操作实例
2022/04/09 Python
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers