前端小点:页面table行中checkbox全选

2020-01-12

大家好,程序猿蛋蛋哥,今天为大家带来一个前端小知识点:页面table行中嵌入checkbox,如何实现全选?

table_select_checkbox.gif

一、基于传统的HTML实现方式(非插件)

实现思路:

  1. 表头的checkbox选中后,触发table表行中的checkbox都选中

// 全选 or 全取消
$('#checkAll').click(function(event) {
    var tr_checkbox = $('table tbody tr').find('input[type=checkbox]');
    tr_checkbox.prop('checked', $(this).prop('checked'));
    // 阻止向上冒泡,以防再次触发点击操作
    event.stopPropagation();
});

说明:checkAll为表头checkbox的id,即:<input type="checkbox" id="checkAll"/>

  1. table表行中所有选中的checkbox数 = table表的行数时,则将表头id=‘checkAll’的单选框置为选中,否则置为未选中。

$('table tbody tr').find('input[type=checkbox]').click(function(event) {
    var tbr = $('table tbody tr');
    $('#checkAll').prop('checked', tbr.find('input[type=checkbox]:checked').length == tbr.length ? true : false);
    // 阻止向上冒泡,以防再次触发点击操作
    event.stopPropagation();
});

附上完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>table中checkbox框全选</title>
</link></meta></meta></head>
<body>
    <table class="table">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="checkAll"/>
                </th>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>1000</td>
                <td>Jack</td>
                <td>23</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>1001</td>
                <td>Lucy</td>
                <td>30</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>1002</td>
                <td>Lilei</td>
                <td>12</td>
            </tr>
        </tbody>
    </table>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"/>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"/>
    <script>
        $(function(){
            // 全选 or 全取消
            $('#checkAll').click(function(event) {
                var tr_checkbox = $('table tbody tr').find('input[type=checkbox]');
                tr_checkbox.prop('checked', $(this).prop('checked'));
                // 阻止向上冒泡,以防再次触发点击操作
                event.stopPropagation();
            });

            // 点击表格每一行的checkbox,表格所有选中的checkbox数 = 表格行数时,则将表头的‘checkAll’单选框置为选中,否则置为未选中
            $('table tbody tr').find('input[type=checkbox]').click(function(event) {
                var tbr = $('table tbody tr');
                $('#checkAll').prop('checked', tbr.find('input[type=checkbox]:checked').length == tbr.length ? true : false);
                // 阻止向上冒泡,以防再次触发点击操作
                event.stopPropagation();
            });

            // 点击表格行(行内任意位置),触发选中或取消选中该行的checkbox
            $('table tbody tr').click(function() {
                $(this).find('input[type=checkbox]').click();
            });

        });
    </script>
</body>
</html>

二、基于bootstrap-table插件的实现方式

实现效果:

bootstrap-table_select_checkbox.gif

实现方法:

  1. 引入css样式和js插件

在head中引入css样式:调换顺序不影响(实际试验过),一般还是按照先bootstap,后bootstrap-table

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
</link></link></head>

在body中引入js插件:顺序为:先jquery,后bootstrap,最后bootstrap-table

<body>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"/>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"/>
    <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"/>
</body>

  1. 表头<th>中配置data-check="true"

<th data-checkbox="true"/>

Bootstrap-table官网示例:examples.bootstrap-table.com/index.html#…

附上完整代码:

<!DOCTYPE html>
<html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">

        <title>基于bootstrap-table实现的checkbox框全选</title>
    </link></link></meta></meta></head>
    <body>
        <table id="table" data-toggle="table" data-height="460" data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
            <thead>
                <tr>
                    <th data-checkbox="true"/>
                    <th data-field="name">Item Name</th>
                    <th data-field="price">Item Price</th>
                </tr>
            </thead>
        </table>

        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"/>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"/>
        <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"/>
    </body>
</html>

扩展:

  1. 如果不想要表头的checkbox框,则在<table>中配置data-checkbox-header="false"

<table id="table" data-toggle="table" data-height="460" data-checkbox-header="false" data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
</table>

  1. 实现点击表格行(行内任意位置),触发选中或者取消选中该行的checkbox,则在<table>中配置data-click-to-select="true"

<table id="table" data-toggle="table" data-height="460" data-checkbox-header="false" data-click-to-select="true" data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
</table>

实现的效果图:

bootstrap-table_checkbox-header.png

Bootstrap-table官网示例:examples.bootstrap-table.com/index.html#…

原文链接:juejin.im

上一篇:聊一聊 Vue 项目的「深链方案」
下一篇:2020年关于 Vue 3 你需要知道的事
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部