在 Layui 框架中，
监听单选框（
radio）的事件可以通过 `form.on` 方法实现。具体步骤如下：
1. 在 HTML 中为每个单选框添加 `lay
-filter` 属性，该属性用于区分
监听事件的名称。例如：
```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="kind
radio" value="1" title="课件">
<input type="
radio" name="kind" lay
-filter="kind
radio" value="2" title="视频">
</div>
</div>
```
在这个例子中，`lay
-filter` 的值为 `kind
radio`，表示该组单选框的
监听事件名称为 `kind
radio` [^3]。
2. 在 JavaScript 中使用 `layui.use` 方法加载 `form` 模块，并通过 `form.on` 方法
监听单选框的事件。例如：
```javascript
layui.use(['form'], function () {
var form = layui.form;
//
监听单选框事件
form.on('
radio(kind
radio)', function (data) {
console.log(data.elem); // 得到
radio 原始 DOM 对象
console.log(data.value); // 被点击的
radio 的 value 值
var level = data.value; // 被点击的
radio 的 value 值
// TODO 下面是我具体业务的处理代码，可忽略
$(".sel
-parent
-msg").hide();
$(".sel
-parent
-msg
-" + level).show();
});
});
```
在这个例子中，`form.on('
radio(kind
radio)', function (data) {...})` 用于
监听 `kind
radio` 事件，当用户点击单选框时，会触发该事件，并通过 `data` 对象获取被点击的单选框的值 [^1]。
3. 如果需要在其他模块中调用事件
监听，可以使用 `util.on` 方法。例如：
```javascript
var util = layui.util;
util.on('lay
-on', {
'test
-iframe
-table': function () {
// ...略...
}
});
```
在这个例子中，`util.on` 方法用于注册自定义事件 [^2]。
4. 对于多个单选框的情况，可以通过设置相同的 `lay
-filter` 属性值来实现统一的事件
监听。例如：
```html
<div class="layui
-form
-item">
<label class="layui
-form
-label">申核后状态</label>
<div class="layui
-input
-block">
<input type="
radio" name="checkResultCode" lay
-filter="checkResultCode" value="1" title="完善再报" checked>
<input type="
radio" name="checkResultCode" lay
-filter="checkResultCode" value="2" title="驳回">
<input type="
radio" name="checkResultCode" lay
-filter="checkResultCode" value="3" title="通过">
</div>
</div>
```
在这个例子中，所有单选框的 `lay
-filter` 属性值均为 `checkResultCode`，表示它们共享同一个事件
监听器 [^4]。
通过上述方法，可以轻松实现对 Layui 框架中单选框（
radio）的事件
监听。
扫一扫
3470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
