layui 复选框checkbox 实现全选全选

Posted yysbolg

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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" type="checkbox" name="like1[aaa]" value="aaa"/><span>aaa</span></li>
            <li><input lay-skin="primary" type="checkbox" name="like1[bbb]" value="bbb"/><span>bbb</span></li>
            <li><input lay-skin="primary" type="checkbox" name="like1[ccc]" value="ccc"/><span>ccc</span></li>
            <li><input lay-skin="primary" type="checkbox" name="like1[ddd]" value="ddd"/><span>ddd</span></li>
        </ul>
    </div>
</form>

<script src="layui/layui.all.js"></script>
<script type="text/javascript">

    layui.use([‘form‘,‘jquery‘], function () 
        var form = layui.form;
        var $ = layui.jquery;
        //点击全选, 勾选
        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‘);
        );
    );
</script>

</body>
</html>

 

 

效果图

 技术图片

 

以上是关于layui 复选框checkbox 实现全选全选的主要内容，如果未能解决你的问题，请参考以下文章

javascript实现复选框的全选全不选

.is() 全选复选的判断

Vue实现单选、全选和反选

js 脚本怎样实现checkbox的全选，反选，类似邮箱中邮件的全选后删除移动

jQuery实现复选框全选全不选

jQuery实现复选框全选全不选