浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)

更新时间：2019年09月10日 15:37:07 作者：林建龙

今天小编就为大家分享一篇浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

若是只引用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中单选按钮改变事件)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue项目中关于全局css的处理
我们在写CSS的时候，会遇到大量相同的属性(比如：margin-top:10px)这种属性几乎每个vue页面都有。这个时候，我们可以把css挂载到全局上，供所有vue页面使用，同时也方便修改。感兴趣的同学可以参考一下
2023-04-04
关于JavaScript中var声明变量作用域的推断
这个问题其实之前困扰了我很久。如今终于想明白了，特来分享，如果有错误的地方，请帮忙指正，我会随时回来修正滴。
2010-12-12
javascript for-in有序遍历json数据并探讨各个浏览器差异
这篇文章主要介绍了javascript for-in有序遍历json数据并探讨各个浏览器差异的相关资料,需要的朋友可以参考下
2015-11-11
基于Bootstrap实现tab标签切换效果
这篇文章主要为大家详细介绍了基于Bootstrap实现tab标签切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
纯js实现仿QQ邮箱弹出确认框
仿QQ邮箱的弹出层，弹出确认框，主要是用火狐的firebug把html和css扣了下来，没有做封装,就定义了一个拖动事件. 大家可以封装自己的弹出窗，嘿嘿！
2015-04-04
用Javascript获取页面元素的具体位置
制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置，在接下来的文章中为大家介绍下使用js是如何实现的
2013-12-12
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言，当鼠标点击此文本框的时候能够将里面的默认文本清除，当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框
2016-01-01
扒一扒JavaScript 预解释
这篇文章主要介绍了JavaScript 预解释,包含带var关键字预解释、带function关键字预解释,需要的朋友可以参考下
2015-01-01
微信小程序实现简单九宫格抽奖
这篇文章主要为大家详细介绍了微信小程序实现简单九宫格抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
JavaScript 数组中最大最小值
本文给大家汇总介绍的是获取JavaScript 数组中最大最小值的方法和示例，非常的详细和全面，希望对大家学习JavaScript能够有所帮助
2016-06-06