【前端】LayUI监听事件汇总

目录

一、监听单选按钮事件

二、监听下拉框事件

三、监听复选框

---

一、监听单选按钮事件

HTML

<div class="layui-form-item">
	<label class="layui-form-label">资源类型：</label>
	<div class="layui-input-inline" style="width: 50%">
		<input type="radio" name="kind" lay-filter="kindradio" value="1" title="课件">
		<input type="radio" name="kind" lay-filter="kindradio" value="2" title="视频">
	</div>
</div>

JQ

// 监听
form.on('radio(kindradio)',function (data) {
	
	console.log(data)	
	
})

二、监听下拉框事件

HTML

<select name="public_kejian_id" lay-search="" lay-filter="source"  lay-verify="required" id="kejian_opt">
									
</select>

JQ  获取当前选中的value值和对应的文本

// 监听下拉框
form.on('select(source)',function (data) {
	console.log('选中的id：'+data.value)
	var selectedText = data.elem[data.elem.selectedIndex].text;
	console.log('选中的文字：' + selectedText);
})

在使用“form.render('select')”时，如果提示“Uncaught ReferenceError: form is not defined”，说明没有加载form模块，需要加载进来，

layui.use(['form'], function(){
            var form = layui.form;

                // 把上面的代码放进来

})

三、监听复选框

html

<input type="checkbox" name="kind" lay-filter="selkind" title="老年人" value="1">
<input type="checkbox" name="kind" lay-filter="selkind" title="糖尿病" value="2">
<input type="checkbox" name="kind" lay-filter="selkind" title="高血压" value="3">

jq

// 监听复选框  选择手账
form.on('checkbox(selkind)',function(data){
 
  console.log(data.elem.checked); // 得到复选框是否被选中，true 或者 false
  console.log(data.value); // 得到复选框的 value 值，如果有的话 

  if(data.elem.checked){
  	console.log(data.elem.value + ' 被选中了')
  }else{
  	console.log(data.elem.value + ' 被取消选中')
  }
})

欢迎关注收藏，持续更新 ~