<!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. ASP.NET ASHX 一般处理程序教程

    你不想创建一个普通ASP.NET的Web窗体页.而又要通过一个查询字符串返回一个动态的图片.XML或者非HTML网页.这是一个用C#编程语言编写的使用ASHX(一般处理程序)的简单教程. 简介 首先, ...

  2. FPGA基础架构总结

    1.为什么FPGA的整体逻辑的速度有限制? 与ASIC相比较,AS指的是(application specific)专用集成应用,而FPGA是可编程逻辑,在实现的过程中,AS是直接用最基础的逻辑门实现 ...

  3. Nginx笔记总结二十一：隐藏或者混淆nginx返回的Server信息

    [root@localhost nginx-]# vi src/http/ngx_http_header_filter_module.c 修改:49-50行 static char ngx_http_ ...

  4. CF-1111B-Average Superhero Gang Power

    首先,对于这题我们要知道要删除一个数使平均值最大一定是删除最小的数,然后我们假设删除操作执行了i次,也就是删除最小的i个数.在已知删除操作次数之后求增加操作的次数就容易了,当然是m - i和k * ( ...

  5. 记一笔MyBatis的坑

    记一笔MyBatis的坑 1.sql查询concat()连接函数xml运行查询乱码 ) , ), char)'%') bll FROM fact_dkxx sq 由于连接的字符串中包含数字与百分比字符 ...

  6. fiddler模拟返回响应数据

    通过find查找修改指定内容 选择find a file 保存后重新发起请求

  7. 吴裕雄--天生自然HTML学习笔记：HTML <head>

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. unique()函数使用

    前提:要先令容器有序. unique的作用是“去掉”容器中相邻元素的重复元素(不一定要求数组有序),它会把重复的元素添加到容器末尾(所以数组大小并没有改变),而返回值是去重之后的尾地址. 用法:uni ...

  9. SpringMVC之转发重定向

    package com.tz.controller; import org.springframework.stereotype.Controller; import org.springframew ...

  10. 达拉草201771010105《面向对象程序设计（java）》第四周学习总结

    实验四类与对象的定义及使用 实验时间 2018-9-20 第一部分:理论知识 1.类与对象概念 (1)类是具有相同属性和方法的一类事物的抽象,是构造对象的模板或蓝图,由类构造对象的过程称为创建类的实例 ...