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

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

一、基于传统的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插件的实现方式

实现效果:

实现方法:

  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官网示例:examples.bootstrap-table.com/index.html#…

原文链接:juejin.im

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

相关推荐

  • 防止contenteditable加入<DIV>进入铬

    iConnor(https://stackoverflow.com/users/1907358/iconnor)提出了一个问题:Prevent contenteditable adding on E...

    2 年前
  • 配置electron中puppeteer executablePath的正确姿势

    TL; NR 轻量, remote调用(使用本地chrome) = 将chromium整合进安装包(需要asar打包时排除chromium), macOS下验证失败 = 这个问题在...

    2 年前
  • 通过SortableJS实现elementUItable拖动效果

    背景 目前elmenetUI的表格是不支持拖动的,但表格行拖动要求往往比较常见。通过引入sortableJS可以方便的让elementUI组件中的table支持拖动效果。

    3 个月前
  • 读懂immutable-js中的Map数据结构

    本文受深入探究Immutable.js的实现机制(https://juejin.im/post/5b9b30a35188255c6418e67c)这篇文章启发,结合自己对Map源码的解读,谈谈我对im...

    2 年前
  • 详解Immutable及 React 中实践

    有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了。

    2 年前
  • 设置光标位置contenteditable <DIV>

    CommunityGONeale(https://stackoverflow.com/users/1/community)提出了一个问题:Set cursor position on contentE...

    2 年前
  • 记录element ui table表格spanMethod动态合并列

    先放几个表格的图看看 表格一: 预览:https://jsfiddle.net/xmwh/2vh...(https://jsfiddle.net/xmwh/2vhuwofm/) element ui...

    2 年前
  • 解决<el-checkbox-group> 数据与UI更新不同步的坑

    Bug情景再现 得到这样的结果: clipboard.png(https://img.javascriptcn.com/03024ef1826cde68217b297ad764b756 "c...

    1 年前
  • 自定义input checkbox或者radio的样式

    浏览器自带的单选钮和多选框的样式都比较单一,很多时候我们需要更换它们的样式。 HTML 关键: 1,label的for属性绑定到input框的id属性,这样保证label再被点击时也点击了in...

    1 年前
  • 组件化页面:封装el-table

    项目做的越来越多,重复的东西不断的封装成了组件,慢慢的,页面就组件化了,只需要定义组件配置数据,使用就好了,这是一件非常舒服的事情,这篇文章主要和大家讲讲如何对elementui中的eltable进行...

    1 年前

官方社区

扫码加入 JavaScript 社区