JS全选反选及节点操作实现收件箱案例

前端菜菜阿海

于 2021-07-09 16:56:47 发布

阅读量291

点赞数 1

分类专栏：前端学习之JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/zxh996/article/details/118609064

版权

JS全选反选及节点操作实现收件箱案例

前言
一、全选反选之商品选择
二、节点操作之留言板（添加、删除）
三、综合案例
- 1.收件箱
- 2.文本上下移动添加及删除功能
总结

前言

JavaScript中的节点操作是一处重要的知识点，在很多的地方都有它的身影，我按照自己之前的学习，整理了一些节点操作的案例，用于加强学习和理解，仅供参考学习。

一、全选反选之商品选择

代码如下（示例）：

    <style>
        * {
    
            padding: 0;
            margin: 0;
        }

        .wrap {
    
            width: 300px;
            margin: 100px auto 0;
        }

        table {
    
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
    
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
    
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
    
            font: 14px "微软雅黑";
        }

        tbody tr {
    
            background-color: #f0f0f0;
        }

        tbody tr:hover {
    
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <label for="j_cbAll"></label><input type="checkbox" id="j_cbAll" />
            </th>
            <th>商品</th>
            <th>价钱</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <label>
                    <input type="checkbox" />
                </label>
            </td>
            <td>iPhone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox" />
                </label>
            </td>
            <td>iPad Pro</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox" />
                </label>
            </td>
            <td>iPad Air</td>
            <td>2000</td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox" />
                </label>
            </td>
            <td>Apple Watch</td>
            <td>2000</td>
        </tr>

        </tbody>
    </table>
</div>
<script>
    // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
    // 获取元素
    var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
    var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
    // 注册事件
    j_cbAll.onclick = function() {
    
        // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
        console.log(this.checked);
        for (var i = 0; i < j_tbs.length; i++) {
    
            j_tbs[i].checked = this.checked;
        }

最低0.47元/天解锁文章

前端菜菜阿海

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS全选反选及节点操作实现收件箱案例

JS全选反选及节点操作实现收件箱案例前言一、全选反选之商品选择二、节点操作之留言板（添加、删除）三、综合案例1.收件箱2.文本上下移动添加及删除功能总结前言JavaScript中的节点操作是一处重要的知识点，在很多的地方都有它的身影，我按照自己之前的学习，整理了一些节点操作的案例，用于加强学习和理解，仅供参考学习。一、全选反选之商品选择代码如下（示例）： <style> * { padding: 0; margi
复制链接

扫一扫