Layui自定义列表多选

需求:已回访不需要分配,未回访的可多选分配

效果图:

实现方式

1,自定义复选

2,已回访的框去掉

3,自己写全选方法

注意:要想进方法一定要写lay-filter,才能触发方法!

代码如下:

javascript 复制代码
{templet: "#checked_input", title: "<input type='checkbox' name='checkAll' title='' lay-skin='primary' lay-filter='checkAll'> ", width: 50},

<script type="text/html" id="checked_input">
    {{#  if (d.status != '1'){ }}
        <input type="checkbox" name="checkOne" lay-skin="primary" lay-filter="checkOne" data-id = "{{ d.id }}">
    {{#  } }}
</script>

// 全选/全不选
form.on("checkbox(checkAll)", function (data) {
    let elem = data.elem;
    $("input[name='checkOne']").prop("checked", elem.checked);
    form.render();
    getCheckedId();
});

// 取消一条数据则全选去掉
form.on('checkbox(checkOne)', function(data){
    if ($("input[name='checkOne']").not('input:checked').length) {
        $('[name="checkAll"]').prop("checked", false);
    } else {
        $('[name="checkAll"]').prop("checked", true);
    }
    form.render();
    getCheckedId();
});

// 获取选中的数据
function getCheckedId(){
    let checkedId = [];
    $("input[name='checkOne']").each(function(k, v){
        if ($(v).is(':checked')) {
            checkedId.push($(v).attr('data-id'));
        }
    })
    return checkedId;
}
相关推荐
Giant1001 分钟前
如果要做优化,CSS提高性能的方法有哪些?
前端
dllxhcjla3 分钟前
html初学
前端·javascript·html
只会写Bug的程序员3 分钟前
【职业方向】2026小目标,从web开发转型web3开发【一】
前端·web3
LBuffer6 分钟前
破解入门学习笔记题二十五
服务器·前端·microsoft
kuxku8 分钟前
使用 SSE 与 Streamdown 实现 Markdown 流式渲染
前端·javascript·node.js
Sherry00720 分钟前
【译】🔥如何居中一个 Div?看这篇就够了
前端·css·面试
前端小咸鱼一条21 分钟前
18. React的受控和非受控组件
前端·react.js·前端框架
一枚前端小能手26 分钟前
🛠️ Service Worker API深度解析 - 生命周期、缓存与离线实战
前端·javascript
马卫斌 前端工程师36 分钟前
vue3 实现echarts 3D 地图
前端·javascript·echarts
蓝瑟42 分钟前
前端测试不再难:Vite+React+Vitest单元测试完整手册
前端·react.js·单元测试