layui 复选框checkbox 全选写法

Posted pyspang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui 复选框checkbox 全选写法相关的知识,希望对你有一定的参考价值。

前语:本来我是不想写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 全选写法的主要内容,如果未能解决你的问题,请参考以下文章

layui如何获取checkbox复选框的值

layui中复选框全选

Layui的checkbox全选以及取消赋值操作

ligerui grid的checkbox问题

如何用jQuery实现checkbox全选

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