layui的全选和反选

该博客介绍了如何使用layui框架来实现HTML中的全选和反选功能。通过监听checkbox事件,动态更新页面上复选框的状态。当点击全选按钮时,所有列头的复选框被选中;而点击反选按钮时,则会切换已选中的复选框状态。示例代码包括HTML结构和JavaScript逻辑,展示了具体的实现细节。
摘要由CSDN通过智能技术生成

效果图如下
在这里插入图片描述

  1. html代码如下
<div id="divCover" class="layui-form-item">
	<input type="checkbox" name="checkAll" title="全选" lay-filter="checkAllFilter">
	<input type="checkbox" name="checkOld" title="反选" lay-filter="checkOldFilter">
	<br />
	<input type="checkbox" name="column" id="商家名称" title="商家名称" lay-skin="primary">
</div>
  1. js代码
//监听全选
form.on('checkbox(checkAllFilter)', function (data) {
    //var express = $('input[name="column"]:checked').val();
    let isCheck = data.elem.checked;//开关是否开启,true或者false
    if (isCheck) {
        $("input[name='column']").prop("checked", "checked");
    } else {
        $("input[name='column']").prop("checked", false);
    }
    form.render();
});

//监听反选
form.on('checkbox(checkOldFilter)', function (data) {
    var column = $("input[name='column']");
    //console.log(column)
    for (i = 0; i < column.length; i++) {
        //console.log(column[i].id)
        let id = column[i].id;
        if (column[i].checked) {
            $("input[id='" + id + "']").prop("checked", false);
        } else {
            $("input[id='" + id + "']").prop("checked", "checked");
        }
    }
    form.render();
});
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

星银色飞行船

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

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

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

打赏作者

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

抵扣说明:

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

余额充值