layui复选框全选/反选

给你一囗甜甜゛ 提交于 2019-12-03 16:50:59
效果图

 


 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui/css/layui.css"  media="all">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script src="https://heerey525.github.io/layui-v2.4.3/layui/layui.js"></script>
</head>
<body>
 
 <form class="layui-form"   > 
      <div class="memberboxy_xiaoxi2">
        <a href="{:url('content/delete_all')}"  onclick="return delete_all($(this));" >删除</a>
      </div>
      <div class="memberboxy_xiaoxi3">
          <table class="layui-table" lay-skin="line">
            <colgroup>
              <col width="60">
              <col>
              <col width="120">
              <col width="80">
            </colgroup>
            <thead>
              <tr>
                <th><input type="checkbox"  lay-filter="allcheckbox"  lay-skin="primary" ></th>
                <th>标题</th>
                <th>时间</th>
                <th>状态</th>
              </tr> 
            </thead>
            <tbody> 
              <tr>
                <td><input type="checkbox" name="ids[]"   lay-skin="primary" ></td>
                <td><a href=""> 1 </a></td>
                <td>1</td> 
                  <td>1 </td> 
              </tr> 

              <tr>
                <td><input type="checkbox" name="ids[]"   lay-skin="primary" ></td>
                <td><a href=""> 1 </a></td>
                <td>1</td> 
                  <td>1 </td> 
              </tr> 


              <tr>
                <td><input type="checkbox" name="ids[]"   lay-skin="primary" ></td>
                <td><a href=""> 1 </a></td>
                <td>1</td> 
                  <td>1 </td> 
              </tr> 

              <tr>
                <td><input type="checkbox" name="ids[]"   lay-skin="primary" ></td>
                <td><a href=""> 1 </a></td>
                <td>1</td> 
                  <td>1 </td> 
              </tr> 
          
            </tbody>
          </table>  
      </div>
    </form>  


<script>
    /***
    * layui 复选框全选/反选
    * author:Abner
    * qq:346882795
    * date: 2019.11.06 9:45
    *
    **/
    layui.use(['form'], function(){
      var form = layui.form; 
      form.on('checkbox(allcheckbox)', function(that){ 
          var isbool = $(this).is(':checked') ? true : false ;
          console.log(isbool);
           $("input[name='ids[]']").each(function(){ 
              $(this).prop("checked",  isbool );
            })

           form.render(); 
       });   

    });
</script>




</body>
</html>

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!