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中单选框改变事件的监听方法分享完毕,希望能为开发者提供参考,欢迎继续支持本站获取更多技术内容。

作者最新文章