前端小點：頁面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>
複製代碼