layui中的switch开关

效果如下图:


显然这个插件是一个checkbox,只是在layui中封装了。所以layui的js和css是必不可少的。

Html代码:

<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <input type="checkbox" checked="" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
        </div>
    </div>
</form>

Js代码:

<script>
    layui.use(['form'], function(){
        var form = layui.form
            ,layer = layui.layer
        //监听指定开关
        form.on('switch(switchTest)', function(data){
            if(this.checked){
                layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
                    offset: '6px'
           
### 如何在 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].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值