<!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. zabbix--基本操作

    zabbix 快速上手 示例一些zabbix的最基本的配置: 添加主机群组:添加主机:创建监控项:创建触发器 添加主机群组 参考官档:https://www.zabbix.com/documentat ...

  2. lua redis接口 （在ubuntu16.04 环境下配置lua-redis开发环境）

    目前成功的lua版本是5.1, 根据网络上的资料显示 lua5.1能够支持 lua-socket 安装lua及相关软件: #安装lua5. #安装lua-socketxiangg sudo apt i ...

  3. 安卓QQ聊天记录导出、备份完全攻略

    发到知乎竟然被删掉,我也不知道我到底违反了哪条.唉,别人的毕竟是别人的.虽然博客园也是别人的 前言 我对聊天记录的备份比较执着,也在这上面折腾过不少.碰到过不少令人头疼的麻烦,在这里分享一下经验. 关 ...

  4. 201671030122 杨凡亿 实验十四 团队项目评审&课程学习总结

    项目 内容 课程名称 2016级计算机科学与工程学院软件工程(西北师范大学) 作业要求 实验十四 团队项目评审&课程学习总结 课程学习目标 (1)掌握软件项目评审会流程(2)反思总结课程学习内 ...

  5. 洛谷P5092 [USACO2004OPEN]Cube Stacking 方块游戏 (带权并查集)

    题目描述 约翰和贝茜在玩一个方块游戏.编号为 1\ldots n 1-n 的 n n ( 1 \leq n \leq 30000 1≤n≤30000 )个方块正放在地上,每个构成一个立方柱. 游戏开始 ...

  6. windows下的批处理bat文件和Linux下的shell文件的互相转换

    shell(Linux.Solaris) bat(windows) 含义 # rem 注释行 /[directory]/[directory]/.../[directory]/ [disk]:\[di ...

  7. Spring Data：CrudRepository接口使用详情

    CrudRepository中的方法 save(entity):添加一条数据 save(entities):添加多条数据entities为集合 findOne(id):根据id查询一条数据 exist ...

  8. 模拟测试20191017～18 lrd Day1& Day2

    $Day1:$ $T1:位运算$ 从低位到高位分类讨论就好了 记得判$inf$ $T2:集合论$ 考场上差点就打线段树了 用一个数组维护,同时用一个变量代表当前总体$+$&&$-$的值 ...

  9. Ubuntu下python3安装tkinter包

    case1: 首先sudo apt-get update(如果不更新很有可能找不到tkinter),然后sudo apt-get install python3-tk,安装完成后就可以使用了. cas ...

  10. 用正确的姿势使用 celery

    简介 celery 是一个简单.灵活.可靠的分布式系统,可以处理大量的消息. celery 是一个任务队列,关注实时处理,同时支持任务调度. 它的工作机制是这样的: 快速使用 安装:pip3 inst ...