浅谈监听单选框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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
javascript编程起步(第二课)
Feb 27 Javascript
js 模拟气泡屏保效果代码
Jul 10 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
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代码
2006/12/06 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
javascript 对象的定义方法
2007/01/10 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
python使用配置文件过程详解
2019/12/28 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
租赁协议书范本
2014/04/22 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
房产协议书范本2014
2014/09/30 职场文书
离婚协议书范文2015
2015/01/26 职场文书
实施意见格式范本
2015/06/05 职场文书
班委竞选稿范文
2015/11/21 职场文书
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js