layui表格checkbox选择全选样式及功能的实例

layui表格checkbox选择全选样式及功能的实例攻略

1. 引入layui和相关依赖

首先，确保你已经引入了layui和相关的依赖文件。你可以在HTML文件中添加以下代码：

<link rel=\"stylesheet\" href=\"https://cdn.staticfile.org/layui/2.5.6/css/layui.css\">
<script src=\"https://cdn.staticfile.org/layui/2.5.6/layui.js\"></script>

2. 创建表格

接下来，你需要创建一个表格，并在表格中添加checkbox选择框。你可以使用layui的table组件来实现这一点。以下是一个示例代码：

<table class=\"layui-table\" id=\"demo\">
  <thead>
    <tr>
      <th>
        <input type=\"checkbox\" lay-filter=\"allChoose\" lay-skin=\"primary\">
      </th>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type=\"checkbox\" lay-skin=\"primary\">
      </td>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>
        <input type=\"checkbox\" lay-skin=\"primary\">
      </td>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
    </tr>
  </tbody>
</table>

在上面的代码中，我们在表头的第一个单元格中添加了一个全选的checkbox，并为其添加了lay-filter=\"allChoose\"属性。在表格的每一行中，我们也添加了一个checkbox。

3. 初始化layui

在页面加载完成后，你需要初始化layui组件。你可以在JavaScript代码中添加以下代码：

layui.use('form', function(){
  var form = layui.form;

  // 监听全选checkbox的点击事件
  form.on('checkbox(allChoose)', function(data){
    var child = $(data.elem).parents('table').find('tbody input[type=\"checkbox\"]');
    child.each(function(index, item){
      item.checked = data.elem.checked;
    });
    form.render('checkbox');
  });
});

在上面的代码中，我们使用了layui的form组件，并监听了全选checkbox的点击事件。当全选checkbox被点击时，我们获取到所有的子checkbox，并将其状态与全选checkbox保持一致。

4. 示例说明

示例1：全选与取消全选

在上面的代码中，我们已经实现了全选与取消全选的功能。当点击全选checkbox时，所有的子checkbox都会被选中或取消选中。

示例2：获取选中的数据

如果你想获取选中的数据，你可以在JavaScript代码中添加以下代码：

layui.use('table', function(){
  var table = layui.table;

  // 监听checkbox的点击事件
  table.on('checkbox', function(obj){
    var selectedData = table.checkStatus('demo').data;
    console.log(selectedData);
  });
});

在上面的代码中，我们使用了layui的table组件，并监听了checkbox的点击事件。当checkbox被点击时，我们通过table.checkStatus('demo').data来获取选中的数据，并将其打印到控制台。

这样，你就可以根据需要获取选中的数据了。

以上就是\"layui表格checkbox选择全选样式及功能的实例\"的完整攻略。希望对你有所帮助！

阅读剩余 53%