老莫的笔记本  
  
请选择 进入手机版 | 继续访问电脑版
查看: 1130|回复: 0

LayUI 没有自带的一个 关于 全选 全不选联动的 checkbox 自制

[复制链接]

662

主题

878

帖子

5115

积分

超级版主

Rank: 8Rank: 8

积分
5115
发表于 2018-8-2 22:41:41 | 显示全部楼层 |阅读模式
先贴个demo
  1. <div class="layui-input-block" id="lm-st1">
  2.                                                 <input type="checkbox" id="lm-st1All" name="lm-st1All" lay-filter="lm-st1All" title="全选">
  3.                                                 <input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1[2]" title="完全相同">
  4.                                                 <input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1[3]" title="部分相同">
  5.                                                 <input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1[4]" title="任意位置加汉字">
  6.                                                 <input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1[5]" title="变汉字">
  7.                                                 <input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1[6]" title="减汉字">
  8.                                                 <input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1[7]" title="含在其他商标中">
  9.                                                 <input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1[8]" title="内含其他商标">
  10.                                                 <input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1[9]" title="换序">
  11.                                                 <input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1[10]" title="逆序">
  12.                                                 <input type="checkbox" lay-filter="lmSt1Fi" name="lmSt1[11]" title="读音相同">
  13.                                             </div>
复制代码
再贴个 依赖layui 本身模块 小封装的 全选函数
  1.     // 表单全选功能封装
  2.     // 1.lmObj ----提取出 包含所有checkbox的父级 div 内含全选  
  3.     // 2.提取出 全选按钮 的 lay-filter的值lmAF   ID值 lmAI   name 值 lmAN
  4.     // 3.提取出 提取出  全选按钮意外的 所有checkbox 的 lay-filter的值
  5.     function lmCheck(lmObj,lmCF,lmAF,lmAI,lmAN){
  6.         lmAI = lmAI || lmAF ;  //如果 filter 和 ID 和 name 都一样
  7.         lmAN = lmAN || lmAF ;
  8.         // 监听复选 类别全选
  9.         form.on('checkbox('+ lmAF +')', function(data){
  10.             console.log(data.elem.checked); //是否被选中,true或者false
  11.             if(data.elem.checked){
  12.                 // 全选
  13.                 var child = $('#'+ lmObj +'').find('input[type="checkbox"]:not([name="'+ lmAN +'"])');
  14.                 child.each(function (index, item) {
  15.                     item.checked = data.elem.checked;
  16.                 });
  17.                 form.render('checkbox');
  18.             }else{
  19.                 // 全不选
  20.                 var child = $('#'+ lmObj +'').find('input[type="checkbox"]:not([name="'+ lmAN +'"])');
  21.                 child.each(function (index, item) {
  22.                     item.checked = false;
  23.                 });
  24.                 form.render('checkbox');
  25.             }
  26.         });   
  27.         //通过判断机构是否全部选中来确定全选按钮是否选中
  28.         form.on('checkbox('+ lmCF +')', function (data) {
  29.             var child =  $('#'+ lmObj +'').find('input[type="checkbox"]:not([name="'+ lmAN +'"])');
  30.             var childChecked =  $('#'+ lmObj +'').find('input[type="checkbox"]:not([name="'+ lmAN +'"]):checked');
  31.             if (childChecked.length == child.length) {
  32.                 $('#'+ lmAF +'').prop('checked', true);
  33.             } else {
  34.                 $('#'+ lmAF +'').prop('checked', false);
  35.             }
  36.             form.render('checkbox');
  37.         })
  38.     }
  39.     // 调用
  40.     lmCheck('lm-st1','lmSt1Fi','lm-st1All');
复制代码




回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表