浅谈监听单选框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 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
javascript获取当前ip的代码
May 10 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
jquery if条件语句的写法
May 19 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php输出图像的方法实例分析
2017/02/16 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
Python中import机制详解
2017/11/14 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
python实现简单的购物程序代码实例
2020/03/03 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
作文评语集锦
2014/12/25 职场文书
前台岗位职责
2015/02/13 职场文书
全国助残日活动总结
2015/05/11 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
Go web入门Go pongo2模板引擎
2022/05/20 Golang
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android