前语:本来我是不想写layui框架的博客的,有的时候数据经过layui渲染后原生的写法就取不到值了,一定要用它框架的写法,实在蛋疼,故写之,以后用到可以省点时间去度娘!

HTML:

<div id="top-<?php echo !empty($val['menu_id'])?$val['menu_id']:0; ?>" style="margin-top: 1%;">

<!-- 菜单, 注意这里一定要加上标签 lay-filter,下面要用这参数 -->
<input lay-filter="menu" lay-skin="primary" type="checkbox" value="<?php echo !empty($val['menu_id'])?$val['menu_id']:0; ?>" title="<?php echo !empty($val['menu_name'])?$val['menu_name']:'-'; ?>">

<!-- 分类 -->
<div class="" style="margin-left: 4%;">
<?php foreach($val['category_list'] as $v){ ?>
<input name="category" lay-skin="primary" type="checkbox" value="<?php echo !empty($v['category_id'])?$v['category_id']:0; ?>" title="<?php echo !empty($v['category_name'])?$v['category_name']:'-'; ?>">
<?php } ?>
</div> </div>

JS:

    // layui框架写法(全选)
layui.use('form', function(){
var form = layui.form;
     //这里的 menu 就是 HTML上面的lay-filter值,就固定一个值就好
form.on('checkbox(menu)', function(data){
var id = data.value;
//这里实现勾选
$('#top-'+id+' input[name=category]').each(function(index, item){
item.checked = data.elem.checked;
});
form.render('checkbox'); // console.log(data.elem); //得到checkbox原始DOM对象
// console.log(data.elem.checked); //是否被选中,true或者false
// console.log(data.value); //复选框value值,也可以通过data.elem.value得到
// console.log(data.othis); //得到美化后的DOM对象
});
});           // 获取选中的分类值
          var check_arr = [];
          $('input[name=category]:checked').each(function(){
              check_arr.push($(this).val());
          });
          if(check_arr.length == 0){
             layer.msg("还未选择分类", {icon: 7, time:1500});return;
          }

效果图:

layui 复选框checkbox 全选写法的更多相关文章

  1. js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  2. js实现复选框的全选、全不选、反选

    js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...

  3. JQ实现复选框的全选反选不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 【jQuery】复选框的全选、反选,推断哪些复选框被选中

    本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...

  5. js实现复选框的全选、全不选和反选

    js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...

  6. Vue复选框的全选

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

  7. 【JavaScript】实现复选框的全选、全部不选、反选

    以较为简洁的程序实现复选框的全选.全部不选.反选 操作. 并且将可变的部分设置为JS的参数,以实现代码复用. 全选和全不选 第一个参数为复选框名称,第二个参数为是全选还是全部不选. function ...

  8. 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...

  9. jQuery学习(五)——使用JQ完成复选框的全选和全不选

    1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...

随机推荐

  1. 《UNIX-Shell编程24学时教程》读书笔记chap7 变量

    7.0 本章内容: 定义,访问,删除标题和数组变量:环境变量和shell变量 7.1 定义变量 标量一次只存储一个值[名字值对]:数组变量可以存储多个值. 以数字开头的变量名如1,2或11将保留为Sh ...

  2. vs2012 MinGW编译ffmpeg 出现libavdevice/avdevice.c(38) : error C2059: 语法错误:“.”

    利用vs2012编译ffmpeg出现以下错误: libavdevice/avdevice.c(38) : error C2059: 语法错误:“.” libavdevice/avdevice.c(40 ...

  3. Codeforces Round #267 (Div. 2) B. Fedor and New Game

    After you had helped George and Alex to move in the dorm, they went to help their friend Fedor play ...

  4. px rem css 转换工具

    http://520ued.com/tools/rem mark 一下 貌似还挺好用

  5. 目标检测之积分图---integral image 积分图2

    前面在图像处理一栏中涉及到boxfilter 的时候,简单介绍过积分图,就是每个像素点是左边和上边的累加和,这样的话可以方便均值和方差,以及直方图统计的相关运算,这里再次结合网络资源重新单独对积分图做 ...

  6. gcc參数总结

    /*gcc 命令总结*/ 补充下gcc的知识,免得被大自然说编译原理不行.. 1.-o 參数 參数说明: -o參数用来指定生成程序的名字 gcc test.c 会编译出一个名为a.out的程序 gcc ...

  7. 淘宝客网站SEO及赚钱与揭密

  8. Windows server 2008 R2 如何启动任务计划程序

    使用windows server 2008 R2  的任务计划程序需要启动服务 Task Scheduler 服务, windows server 2008 R2 默认状态下Task Schedule ...

  9. php常用加密函数总结

    $var = 123; /** * md5 加密(单项加密.不可逆) * param $var 需要加密的变量(int\float\string\bool\null),资源类型(resource)和复 ...

  10. 操作系统:Bochs 2.6.8的配置文件bochsrc.bxrc修改

    由于现在Bochs 2.6.8相比之前有些改动,之前的配置文件不能直接运行,针对配置文件需要有些修改. 1. 配置文件 ######################################## ...