/**
 * 前端html
 **/
<th>
    <input type="checkbox" value="全选" id="checkall" name="admincheckall"  lay-skin="primary" lay-filter="allChoose">
</th>

//遍历得到的复选框
<td class="sel">
    <input type="checkbox" class="sel" name="select" value="{{$v['id']}}"  lay-skin="primary" lay-filter="choose">
</td>
/**
 * js
 **/
//全选,全不选
layui.use(['form','layer'],function () {
    var $ = layui.jquery;
    var form = layui.form;
    //选中的
    form.on('checkbox(allChoose)',function (data) {
        //判断当前全选复选框是否选中
        var child = $(".sel input[type='checkbox']");
        child.each(function (index,item) {
            //判断当前全选是否选中,选中以后,将下面的复选框全部勾选       //item 整个复选框的input
            item.checked = data.elem.checked;
        })
        //重新渲染
        form.render('checkbox');
    })
})
//layui 监听事件,检测复选框点击,如果复选框全部点击,全选复选框点击上
layui.use(['form','layer'],function () {
    var form = layui.form;
    form.on('checkbox(choose)', function (data) {
        var child = $(".sel input[type='checkbox']");
        var arr = [];
        child.each(function (index,item) {
            //获取点击的
            arr.push($(this).prop('checked'))
        })
        //如果有false,全选勾掉
        if(arr.includes(false)){
            //为input,checkbox添加checked
            document.querySelector('#checkall').checked = false
            form.render('checkbox');
        }else{
            document.querySelector('#checkall').checked = true
            form.render('checkbox');
        }

    })

})


本文链接:layui jquery多选全选 - https://myags.cn/index.php/33.html

版权声明:如无特别声明,本文即为原创文章,仅代表个人观点,版权归 拾穗儿's 所有,未经允许不得转载!
最后修改:2020 年 08 月 10 日 08 : 48 PM
如果觉得我的文章对你有用,请随意赞赏