Layui的checkbox全选以及取消、赋值操作

全选操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>

<form class="layui-form">
    <div class="checkallbox">
        <input lay-skin="primary" type="checkbox" id="checkall" name="type" lay-filter="allChoose" value="checkall"/><span>全选</span></div>
    <div class="seach-box">
        <ul>
            <li><input lay-skin="primary" lay-filter="singleChoose" type="checkbox" name="like1[aaa]" value="aaa"/><span>aaa</span></li>
            <li><input lay-skin="primary" lay-filter="singleChoose" type="checkbox" name="like1[bbb]" value="bbb"/><span>bbb</span></li>
            <li><input lay-skin="primary" lay-filter="singleChoose" type="checkbox" name="like1[ccc]" value="ccc"/><span>ccc</span></li>
            <li><input lay-skin="primary" lay-filter="singleChoose" type="checkbox" name="like1[ddd]" value="ddd"/><span>ddd</span></li>
        </ul>
    </div>
</form>
<script>
form.on('checkbox(allChoose)', function (data) {
        var child = $(".seach-box input[type='checkbox']");
            child.each(function (index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        form.render('checkbox');
    });
</script>

上面是全选操作

 

下面取消全选以及判断是否全选

form.on('checkbox(singleChoose)', function (data) {
        console.log(data.elem.checked);
        let that = $(data.elem);
        var child = that.parents('div').find(".seach-box input[type='checkbox']");
        var checked = [];
        child.each(function (index, item) {
            if (!item.checked) {
                checked.push(item.checked);
            }
        });

        if (checked.length > 0) {
            // 取消全选
            $('#checkall').prop("checked",false);

        } else {
            $('#checkall').prop("checked",true);
        }
        form.render('checkbox');
    });

我试过使用jquery动态设置layui的checkbox元素的选中状态时始终只能取消选中,却不能重新勾选,点击勾选则没有问题,代码如下 (但是不行

if (value == "true") {
    $("#checkall").attr("checked", "checked");
} else {
    $("#checkall").removeAttr("checked");
}

 最后使用了这种(如下)可以了

if (value == "true") {
    $('#checkall').prop("checked", true);
} else {
    $('#checkall').prop("checked", false);
}

 

layui 中,如果要实现多个 checkbox全选/取消全选功能,可以使用 `form` 模块的 `on` 方法,绑定 `checkbox` 的点击事件,然后通过 `prop` 方法修改其他 checkbox 的选择状态。 示例代码如下: HTML: ```html <div class="layui-form-item"> <input type="checkbox" name="checkAll" lay-skin="primary" title="全选"> <div class="layui-input-block"> <input type="checkbox" name="like[1]" lay-skin="primary" title="复选框1"> <input type="checkbox" name="like[2]" lay-skin="primary" title="复选框2"> <input type="checkbox" name="like[3]" lay-skin="primary" title="复选框3"> </div> </div> ``` JavaScript: ```javascript //监听全选 form.on('checkbox(checkAll)', function(data){ var child = $(data.elem).parents('.layui-form').find('input[type="checkbox"]'); child.each(function(index, item){ item.checked = data.elem.checked; }); form.render('checkbox'); }); //监听每个复选框 form.on('checkbox', function(data){ var child = $(data.elem).parents('.layui-form').find('input[type="checkbox"]'); var checkedChild = $(data.elem).parents('.layui-form').find('input[type="checkbox"]:checked'); if (checkedChild.length === child.length) { $(data.elem).parents('.layui-form').find('input[name="checkAll"]').prop('checked', true); } else { $(data.elem).parents('.layui-form').find('input[name="checkAll"]').prop('checked', false); } form.render('checkbox'); }); ``` 以上代码中,监听了全选复选框和每个子复选框的点击事件,通过 `prop` 方法修改其他 checkbox 的选择状态,最后通过 `form.render('checkbox')` 方法重新渲染 checkbox,使其生效。 希望能对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值