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;
          }

 

效果圖:

 

打賞

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2021 CODEPRJ.COM