<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" type="text/css" href="./utils/layui-v2.5.4/layui/css/layui.css">
    <style>
        body {
            margin: 10px;
        }
        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</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="111" /><span>aaa</span></li>
                <li><input lay-skin="primary" type="checkbox" name="like1[bbb]" value="222" /><span>bbb</span></li>
                <li><input lay-skin="primary" type="checkbox" name="like1[ccc]" value="333" /><span>ccc</span></li>
                <li><input lay-skin="primary" type="checkbox" name="like1[ddd]" value="444" /><span>ddd</span></li>
            </ul>
        </div>
    </form>
    <script src="./utils/layui-v2.5.4/layui/layui.js"></script>
    <script src="./utils/jquery-3.4.1.min.js"></script>
    <script>
        layui.use(['form', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
            var form = layui.form//日期
                , laypage = layui.laypage //分页
                , layer = layui.layer //弹层
                , table = layui.table //表格
                , carousel = layui.carousel //轮播
                , upload = layui.upload //上传
                , element = layui.element //元素操作
                , slider = layui.slider //滑块
            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的form表单的checkbox全选与全不选问题的更多相关文章

  1. layui中form表单渲染的问题

    layui 官网的这部分文档介绍:http://www.layui.com/doc/modules/form.html#render 注意:针对的是表单元素,input select  textare ...

  2. layui渲染form表单

    有时ajax请求的数据返回时,页面已经加载了,此时就无法展示ajax加载的内容,如果要局部刷新表单,则加上如下代码: layui.use('form', function() { var form = ...

  3. 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize

    1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...

  4. Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  5. Layui：前后端分离之Form表单

    页面效果图: <div style="display: none;" id="formContainer"> <form class=&quo ...

  6. [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  7. Form表单之复选框checkbox操作

    input复选(checkbox): <label>input复选1组:</label> <input type="checkbox" name=&q ...

  8. 巨蟒python全栈开发django11:ajax&&form表单上传文件contentType

    回顾: 什么是异步? 可以开出一个线程,我发出请求,不用等待返回,可以做其他事情. 什么是同步? 同步就是,我发送出了一个请求,需要等待返回给我信息,我才可以操作其他事情. 局部刷新是什么? 通过jq ...

  9. PHP全栈开发（四）: HTML 学习（3. form 表单）

    form 表单标签 它表的是一个区域,而非是一个具体的某个元素,它也是作为一个容器的存在. 表单域主要是允许用户在表单域中输入内容,比如文本框,下拉列表,单选框,复选框,等等. <!DOCTYP ...

随机推荐

  1. deeplearning.ai 卷积神经网络 Week 2 卷积神经网络经典架构

    1. Case study:学习经典网络的原因是它们可以被迁移到其他任务中. 1.1)几种经典的网络: a)LeNet-5(LeCun et al., 1998. Gradient-based lea ...

  2. window server 2012+apache+django

    一.apache下载安装 https://www.apachelounge.com/download/VC10/ ***注意*** 本人用的是window server 2012 64位版本云服务器, ...

  3. GitHub之初始化

    1.github上新建repository. 2.本地 mkdir git-init-demo. 3.cd git-init-demo. 4.git clone https://github.com/ ...

  4. 吴裕雄--天生自然python学习笔记：Python3 网络编程

    Python 提供了两个级别访问的网络服务.: 低级别的网络服务支持基本的 Socket,它提供了标准的 BSD Sockets API,可以访问底层操作系统Socket接口的全部方法. 高级别的网络 ...

  5. C++笔试常见问题

    C++提供的编译预处理功能主要有以下三种: 宏定义 文件包含 条件编译 预编译又称为预处理 , 是做些代码文本的替换工作.处理#开头的指令 , 比如拷贝 #include包含的文件代码, #defin ...

  6. 喜欢B站的用户为何认同感超强？

    前几天视频弹幕网站哔哩哔哩(以下简称"B站"),正式登陆纳斯达克,股票代码"BILI".当日其CEOC兼董事长陈睿在B站的账号上传了上市视频. 打开视频,满眼& ...

  7. Header函数和PHP_AUTH_USER做用户验证（转载）

    php Header PHP_AUTH_USER PHP_AUTH_PW 用户验证 在php中,可以使用Header函数做一些有趣的事情,用户验证就是其中一个很有意思的功能.具体用法: Header( ...

  8. MongoDB启动.mongorc.js报错解决方法

    在bin目录下输入./mongo --norc 不去加载.mongorc.js

  9. 机器学习算法的基本知识（使用Python和R代码）

    本篇文章是原文的译文,然后自己对其中做了一些修改和添加内容(随机森林和降维算法).文章简洁地介绍了机器学习的主要算法和一些伪代码,对于初学者有很大帮助,是一篇不错的总结文章,后期可以通过文中提到的算法 ...

  10. Linux上centOs6+安装mysql5.7详细教程 - 前端小鱼塘

    https://coyhom.github.io/ 人类的本质是复读机,作为一个非linux专业人员学习linux最好的办法是重复 环境centos6.5 版本5.7 1: 检测系统是否自带安装mys ...