<!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. 【Mysql异常】[HY000][1030] Got error 28 from storage engine

    原因: 应该是磁盘空间不足导致 可通过 df -h 查看部署mysql的服务磁盘空间使用情况

  2. 项目Beta冲刺 总结

    课程: 软件工程1916|W(福州大学) 作业要求: 项目Beta冲刺 团队名称: 火鸡堂 作业目标: 总结 火鸡堂 队员学号 队员姓名 博客地址 备注 221600111 彼术向 http://ww ...

  3. Spring Boot 中的事务管理

    希望能在发生异常的时候被回退,这时候就可以使用事务让它实现回退,做法非常简单,我们只需要在test函数上添加@Transactional注解即可. 使用@Transactional注解来声明一个函数需 ...

  4. 如何开发一个异常检测系统：异常检测 vs 监督学习

    异常检测算法先是将一些正常的样本做为无标签样本来学习模型p(x),即评估参数,然后用学习到的模型在交叉验证集上通过F1值来选择表现最好的ε的值,然后在测试集上进行算法的评估.这儿用到了带有标签的数据, ...

  5. 关于defer.promise.then 异步的一个疑问 | 用柯里化做promise | 用递归做promise

    疑问:感觉会报错,因为执行到defer.promise.then这时候还没到defer.resolve,因为异步读文件,总归会慢 解答:先执行defer.promise.then,是给callback ...

  6. 到底该不该用RTOS——rtos的优点

    我现在要不要学习RTOS? 学习RTOS有什么好处? 我的项目要不要跑RTOS? ······等等一些关于RTOS的问题,其实归根结底还是你对RTOS了解的不够,项目开发的经验还不足等. 针对这部分朋 ...

  7. yolov3

    YOLOv3没有太多的创新,主要是借鉴一些好的方案融合到YOLO里面.不过效果还是不错的,在保持速度优势的前提下,提升了预测精度,尤其是加强了对小物体的识别能力(yolov1在这方面是有缺陷的). 本 ...

  8. Xamarin.Forms应用程序基础知识

    生命周期 在 Android 上,若主活动的 [Activity()] 属性缺少 ConfigurationChanges = ConfigChanges.ScreenSize | ConfigCha ...

  9. Cronicle 基于nodejs 的分布式任务调度工具

    Cronicle 是一款不多的分布式任务调度工具,基于nodejs 开发,同时包含看web UI,从官方介绍看到的UI还是 挺不错的,而且功能很丰富,值得试用下 参考资料 http://cronicl ...

  10. rundeck配置salt-api

    Rundeck 安装: 系统: # cat /etc/issue CentOS release 6.7 (Final) 内核: # uname -r -.el6.x86_64 IP 地址: 172.1 ...