zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    一道比较有趣的题
    笑话两则
    时钟
    组策略 简单介绍
    网页乱码问题ASP.NET
    同性恋的公鸡
    SQL中CASE函数_可解决编程中空表检索的一些问题
    百万网?
    黑客 故事
    word有趣问题集锦
  • 原文地址:https://www.cnblogs.com/wybshyy/p/13783629.html
Copyright © 2011-2022 走看看