js实现全选|全不选和反选功能

最新推荐文章于 2022-08-23 17:23:43 发布

林小康

最新推荐文章于 2022-08-23 17:23:43 发布

阅读量796

点赞数 1

分类专栏： javaScript

本文链接：https://blog.csdn.net/weixin_39877284/article/details/81675633

版权

javaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js实现全选|全不选和反选功能
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var inputobjs = document.getElementsByTagName("input");
            function findAll(){
                for (var i = 2; i < inputobjs.length; i++) {
                    inputobjs[i].checked=inputobjs[0].checked;
                }
            }

            function reverse(){
                //注意 input元素的起始下标
                for (var i = 1; i < inputobjs.length; i++) {
                    if(inputobjs[i].checked) {
                        inputobjs[i].checked = null;
                    } else {
                        inputobjs[i].checked = "checked";
                    }
                }
            }
        </script>
    </head>
    <body>
        <table border="1px">
            <tr>
                <td><input type="checkbox" onchange="findAll()"></td>
                <td>全选|全不选</td>
            </tr>
            <tr>
                <td><input type="checkbox" onclick="reverse()"></td>
                <td>反选</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>2</td>
            </tr>

        </table>
    </body>
</html>