如何通过JS实现反选功能？

不用打火机

于 2021-11-08 11:32:54 发布

阅读量1k

点赞数 3

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/suyuan12365/article/details/121203616

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文介绍了如何通过JavaScript实现HTML表格的反选功能，当点击'反选'按钮时，表格中的复选框状态反转。同时，文章提及了如何实现鼠标悬浮到表格行上时，该行颜色变化的效果，提供了相关代码示例和简化版代码，帮助读者理解前端交互的实现方式。

摘要由CSDN通过智能技术生成

下面有个表格：

表格代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过JS实现反选功能|web前端高手班 http://web.itheima.com</title>
    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="check"/>反选</th>
                <th>班级类型</th>
                <th>开班时间</th>
                <th>开班状态</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>基础班</td>
                <td>2021-08-31</td>
                <td>报满已开</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>基础班</td>
                <td>2021-09-11</td>
                <td>报满已开</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>高手班</td>
                <td>2021-08-05</td>
                <td>报满已开</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>高手班</td>
                <td>2021-09-28</td>
                <td>报满已开</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>高手班</td>
                <td>2021-11-11</td>
                <td>即将开班</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

功能需求：实现反选功能

效果如下：

功能实现思路一：

1. 为id="check"绑定click事件；

2. 找到所有需要控制的input元素

3. 通过循环遍历找到tbody中每个input

4. 更改input的checked的值，如：false改为true

JavaScript代码如下：

    <script>
        // 为id="check"绑定click事件；
        document.getElementById('check').onclick = function(){
            // 找到所有需要控制的input元素
            var inp = document.getElementsByTagName('input');
            // 通过循环遍历找到tbody中每个input,需要控制的input元素是从第二个开始所以i =1
            for(i=1; i <= inp.length; i++){
                // 更改input的checkbox的值，如：false改为true,true改为false
                if( inp[i].checked == true){
                    inp[i].checked = false;
                }else{
                    inp[i].checked = true;
                }
            }
        }
    </script>

代码简化版：

    <script>
        // 为id="check"绑定click事件；
        document.getElementById('check').onclick = function(){
            // 找到所有需要控制的input元素
            var inp = document.getElementsByTagName('input');
            // 通过循环遍历找到tbody中每个input,需要控制的input元素是从第二个开始所以i =1
            for(i =1; i <= inp.length; i++){
                // checked值去反
                inp[i].checked = !inp[i].checked;
            }
        }
    </script>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过JS实现反选功能|web前端高手班 http://web.itheima.com</title>
    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="check"/>反选</th>
                <th>班级类型</th>
                <th>开班时间</th>
                <th>开班状态</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>基础班</td>
                <td>2021-08-31</td>
                <td>报满已开</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>基础班</td>
                <td>2021-09-11</td>
                <td>报满已开</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>高手班</td>
                <td>2021-08-05</td>
                <td>报满已开</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>高手班</td>
                <td>2021-09-28</td>
                <td>报满已开</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>高手班</td>
                <td>2021-11-11</td>
                <td>即将开班</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 为id="check"绑定click事件；
        document.getElementById('check').onclick = function(){
            // 找到所有需要控制的input元素
            var inp = document.getElementsByTagName('input');
            // 通过循环遍历找到tbody中每个input,需要控制的input元素是从第二个开始所以i =1
            for(i =1; i <= inp.length; i++){
                // checked值去反
                inp[i].checked = !inp[i].checked;
            }
        }
    </script>
</body>
</html>

想想上面表格如何实现鼠标悬浮对应表格变色呢？

可以参考下面文章：

鼠标放到表格整行变色效果怎么实现？

不用打火机

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
如何通过JS实现反选功能？

下面有个表格：表格代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"..
复制链接

扫一扫

专栏目录