zoukankan      html  css  js  c++  java
  • 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;
              }

    效果图:

  • 相关阅读:
    一点点
    第四章:检查产品说明书
    这是一个动画效果,一个圆在桌面上动
    border-image的拉伸和平铺
    用js实现左右阴影的切换
    伪样式:hover ,:active,:focus
    画一个DIV并给它的四个角变成圆形,且加上阴影
    【转】asp.net 项目在 IE 11 下出现 “__doPostBack”未定义 的解决办法
    Full postback triggered by LinkButton inside GridView inside UpdatePanel
    苹果IOS开发者账号的区别,企业账号,个人账号,公司团队账号,教育账号
  • 原文地址:https://www.cnblogs.com/pyspang/p/9648034.html
Copyright © 2011-2022 走看看