2025年如何通过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">
    <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>

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

可以参考下面文章：

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

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

相关推荐