<!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 实现全选全选的更多相关文章

  1. 转发！HTML 复选框 checkbox 的 JavaScript 的全选和全反选

    checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: <html> <head> <meta http-equiv= ...

  2. layui 添加复选框checkbox后，无法正确显示及点击的方法

    layui 添加复选框checkbox后,无法正确显示方式,这个是由于html里的样式添加 layui-form后,没有加载 form插件 ,具体如下: <body style="ba ...

  3. php 判断复选框checkbox是否被选中

    php 判断复选框checkbox是否被选中   复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...

  4. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  5. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  6. PyQt(Python+Qt)学习随笔：复选框checkBox的tristate属性

    在Qt Designer中,tristate属性是复选框checkBox相比较于QAbstractButton多出来的唯一属性. tristate属性表示复选框是三种状态还是两种状态,如果trista ...

  7. vue结合element-ui实现二级复选框checkbox

    vue结合element-ui实现二级复选框checkbox 话不多说先上效果 交互:1.点击按钮全选,所有的checkbox全部选中:点击清空,所有的checkbox框都不选:点击确定获取选中的ch ...

  8. css3美化复选框checkbox

     两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...

  9. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  10. 复选框(checkbox)、单选框（radiobox）的使用

    复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...

随机推荐

  1. HDFS 配额教程

    本文原始地址:https://sitoi.cn/posts/12544.html 名称配额(Name Quota) 名称配额是在对应的目录下所有文件和目录名称的数量上的限制. 当超过这个配额的时候,文 ...

  2. Httpd服务进阶知识-LAMP源码编译安装

    Httpd服务进阶知识-LAMP源码编译安装 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 想必大家都知道,动态资源交给fastcgi程序处理,静态资源依旧由httpd服务器处理  ...

  3. Docker 版ansible galera集群

    1. 部署galera集群 利用四台主机cicd.node1.node2.node3来搭建galera集群. 1> 上传压缩包至cicd,解压得到ansible配置文件 [root@cicd ~ ...

  4. xadmin引入drf-yasg生成Swagger API文档

    一.安装drf-yasg: 由于django-rest-swagger已经废弃了 所以引入了drf-yasg pip install drf-yasg 安装install drf-yasg库 http ...

  5. BFS算法的优化 双向宽度优先搜索

    双向宽度优先搜索 (Bidirectional BFS) 算法适用于如下的场景: 无向图 所有边的长度都为 1 或者长度都一样 同时给出了起点和终点 以上 3 个条件都满足的时候,可以使用双向宽度优先 ...

  6. jmeter从表格批量读取数据（一）

    1.新建一个文本文档,重命名为2.csv 2.可以在文档中设置如下参数:casenum:用例编号:url:访问路径:para:访问的域名:function:请求方式:expectValue:响应值 3 ...

  7. 20、Python常用模块sys、random、hashlib、logging

    一.sys运行时环境模块 sys模块负责程序与python解释器的交互,提供了一系列的函数和变量,用于操控python的运行时环境. 用法: sys.argv:命令行参数List,第一个元素是程序本身 ...

  8. codeforces1267G

    考虑我们在某个时刻,剩下的数有 $ i $ 个,这些数的和为 $ j $,那么我们期望要抽 $ n \over i $ 次才能取到一个新的物品,这个物品的期望权值为 $ j \over i $,我们花 ...

  9. File upload - Double extensions

    提示:Your goal is to hack this photo galery by uploading PHP code.Retrieve the validation password in ...

  10. 项目（1-1）ES32获取mpu9250数据网页交互显示

    教程 https://www.hackster.io/donowak/esp32-mpu9250-3d-orientation-visualisation-467dc1 项目地址 https://gi ...