jQuery与Layui环境下监听Radio单选框改变事件的方法
作者:页面旅途时间:2026-10-23 10:59:20浏览:232
本文介绍了在纯jQuery环境和Layui框架下监听单选框radio改变事件的不同实现方式。纯jQuery通过change方法绑定事件,而Layui因接管DOM渲染,需使用form.on方法监听特定name属性的radio组件,确保事件正确触发。
jQuery环境下监听Radio事件
若项目仅引入jQuery库,监听单选框(radio)状态变更的标准做法如下:
<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框架下的Radio事件处理
需注意,若项目中同时引入了Layui的样式与组件逻辑,上述jQuery原生监听方式将失效,因为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("这是个女孩");
}
});
});
以上关于jQuery与Layui中单选框改变事件的监听方法分享完毕,希望能为开发者提供参考,欢迎继续支持本站获取更多技术内容。
作者最新文章
JS监听滚动事件:回到顶部按钮的显示与隐藏逻辑
2026-11-05 16:19:37
JavaScript怎么读写LocalStorage与SessionStorage
2026-11-05 15:40:11
anime.js 与 GSAP 对比:轻量级项目该怎么选择动画库
2026-11-05 11:24:55
flv.js 与 hls.js 在直播场景下的选型对比
2026-11-05 08:18:52
JavaScript能做什么?前端开发中的作用与应用场景解析
2026-11-04 23:17:54
