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>
  • 相关阅读:
    卸载驱动时,没有/lib/modules目录
    strcmp与strncmp的区别
    12864 显示多种图形
    环形缓冲区的应用ringbuffer
    环形缓冲区
    pthread_cond_wait 详解
    [置顶] 自己写一个简单通用的Makefile
    指针空间的申请与释放
    双向链表操作
    FreeType 管理字形
  • 原文地址:https://www.cnblogs.com/wybshyy/p/13783629.html
Copyright © 2011-2022 走看看