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

时间 2020-01-13

标签前端小点页面 table 行中 checkbox 全选栏目 HTML 繁體版

原文原文链接

你们好，程序猿蛋蛋哥，今天为你们带来一个前端小知识点：页面table行中嵌入checkbox，如何实现全选？javascript

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

实现思路：

表头的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"/>
复制代码

当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();
});
复制代码

附上完整代码：css

<!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>
</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>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <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>
复制代码

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

实现效果：

实现方法：

引入css样式和js插件

在head中引入css样式：调换顺序不影响（实际试验过），通常仍是按照先bootstap，后bootstrap-tablehtml

<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">
</head>
复制代码

在body中引入js插件：顺序为：先jquery，后bootstrap，最后bootstrap-table前端

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

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

<th data-checkbox="true"></th>
复制代码

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

附上完整代码：jquery

<!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>
    </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>
                    <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>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
        <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
    </body>
</html>
复制代码

扩展：

若是不想要表头的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>
复制代码

实现点击表格行（行内任意位置），触发选中或者取消选中该行的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>
复制代码

实现的效果图：npm

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