实现表格的单选，全选，反选和全不选功能（购物车勾选框功能）

最新推荐文章于 2023-10-09 17:31:55 发布

皆非_tony

最新推荐文章于 2023-10-09 17:31:55 发布

阅读量637

点赞数

分类专栏：前端文章标签： javascript es6

本文链接：https://blog.youkuaiyun.com/m0_48598369/article/details/124962543

版权

本文介绍如何利用JavaScript（包括ES5和ES6语法）实现表格中的单选、全选、反选及全不选功能，常见于购物车的勾选操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文使用es5和es6的语法代码来实现！

html代码

<table border="1" width="400px" style="text-align:center;">
        <thead>
            <tr>
                <th><input type="checkbox" name="all"></th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>爱好</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>刘德华</td>
                <td>男</td>
                <td>18</td>
                <td>演电影</td>
                <td><a href="javascript:;">删除</a></td>
            </tr>
            <t