动态修改layui switch 状态 与获取layui switch的值

这篇博客详细介绍了layui框架中如何创建和操作开关(switch)组件,包括HTML结构和JavaScript实现。通过监听'switchTest'事件,可以获取开关状态,并弹出提示消息。同时,展示了如何使用layui的jQuery扩展改变开关状态并重新渲染表单。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


 

html部分:

<div class="layui-form">

<div class="layui-form-item">

<label class="layui-form-label">开关</label>

<div class="layui-input-block"> <input class="test" type="checkbox" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF"> </div>

</div>

</div>

 

JS部分

layui.use(['form'], function(){
var form = layui.form
,layer = layui.layer
//监听指定开关
form.on('switch(switchTest)', function(data){
if(this.checked){ //this.checked就是值
layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
offset: '6px'
});
}else{
layer.msg('开关: 关掉了', {
offset: '6px'
});
}
//do some ajax opeartiopns;
});
});

// layui.jquery('.test').removeAttr('checked'); //改变开关为 关
// layui.jquery('.test').attr('checked','checked'); //改变开关为 开
//重新渲染

layui.form.render(); // 重新渲染。。。

 

### 如何在 Layui 中使用 Switch 开关组件并获取当前行的数据 #### HTML 结构定义 为了确保能够正确处理每一行的数据,在表格中定义 `switch` 组件时,可以为每一个开关绑定唯一的标识符(如用户的 ID)。这可以通过自定义属性来完成。 ```html <td> <input type="checkbox" lay-filter="switchTest" id="{:uniqueId}" data-id="{:row.id}" <!-- 这里假设 row 是对象 --> {:checked ? 'checked' : ''} name="status" lay-skin="switch" lay-text="ON|OFF"> </td> ``` 上述代码片段展示了如何通过 `data-id` 属性存储每条记录的唯一标识,并利用三元运算符动态设置已选中状态[^3]。 #### JavaScript 事件监听器配置 接下来,需要编写相应的JavaScript逻辑去捕获这些变化。这里采用的是Layui内置的形式验证机制以及表单模块提供的API接口: ```javascript layui.use(['form', 'table'], function(){ var form = layui.form; // 监听指定过滤器下的所有 switch 变化 form.on('switch(switchTest)', function(obj){ console.log(this); // DOM原生的对象 console.log(obj.othis); // 获得开关被点击前的状态,true 或者 false const currentRowData = { id: $(obj.elem).attr('data-id'), // 使用 jQuery 获取 data-id 的 status: obj.elem.checked // 判断当前是否开启 }; // 发送AJAX请求更新服务器端数据... console.log(currentRowData); }); }); ``` 这段脚本实现了当用户切换某个特定行上的开关时触发回调函数的功能。在这个回调内部不仅可以直接访问DOM元素本身(`this`)及其原始状态(`obj.otheis`),还可以轻松提取到该行的关键信息——即ID和新的开关状态[^1][^2].
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qaakd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值