<!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. centos 修改默认启动内核，及删除无用内核

    #使用cat /boot/grub2/grub.cfg |grep menuentry 查看系统可用内核 [root@bigapp-slave27 ~]# cat /boot/grub2/grub.c ...

  2. PAT 乙级 1076.Wifi密码

    题目来源 下面是微博上流传的一张照片:“各位亲爱的同学们,鉴于大家有时需要使用 wifi,又怕耽误亲们的学习,现将 wifi 密码设置为下列数学题答案:A-1:B-2:C-3:D-4:请同学们自己作答 ...

  3. 配置VScode c语言环境

    vscode 提示 <sys/socket.h>找不到, 原来是不同平台上,头文件不一样. 参考:https://blog.csdn.net/qq_28581077/article/det ...

  4. js 正则表达式 贪婪与惰性

    首先引入一个介绍比较详细的网站 http://www.jb51.net/article/31491.htm 接下来是本人的简介 其实贪婪和惰性很容易理解,从字面意思我们就可以知道,所谓的"贪 ...

  5. python基础知识笔记-集合

    集合使用花括号将元素之间用逗号隔开即可.集合的输出里不会出现相同的元素.集合中有并集.交集.差集等,以下为一些简单的表达: def main(): list1=[1,1,2,2,3,3] print( ...

  6. 搭建hadoop的HA集群模式（hadoop2.7.3+hive+spark）

    参考:http://blog.51cto.com/12824426/2177663?source=drh 一.集群的规划 Zookeeper集群:192.168.176.131 (bigdata112 ...

  7. JAVA接口与类的区别

    抽象类:一个类中有抽象方法,这个类就变成了抽象类.抽象类中class的前面必须有abstract修饰符.抽象类中可以有普通方法,也可以有抽象方法,而抽象方法的个数可以是0个,也可以是多个.子类继承父类 ...

  8. Virtual DOM的渲染机制--猜测

    一个node的状态发生变化: 会对当前结点和子节点的数据全部进行更新: 然后进行dom比较: 比较完毕后一次性提交: 相对于以前的渲染方式: 每一个node的数据发生变化,都会产生一次渲染提交: 以上 ...

  9. Sam小结和模板

    Sam 的一些总结 注意在子串在某个节点的性质,其 father 上也会有相同的性质 1. 统计子串出现的次数 在 \(parent\) 树上做 \(dp\),对于每一个节点,初始化为 \(dp[i] ...

  10. SQL Server 定期归档大表历史数据

    很少有开发会考虑到数据归档的问题已经数据增长的问题,当程序运行一段时间后,就会出现各种问题,部分问题可以修改SQL语句或使用索引来解决,但如果SQL语句无法修改,糟糕的SQL语句无法使用索引,归档历史 ...