html 使用js中dom对象完成复选框的全选，取消全选和反选

最新推荐文章于 2021-06-15 20:34:53 发布

Main12138

最新推荐文章于 2021-06-15 20:34:53 发布

阅读量535

点赞数 1

分类专栏：大前端文章标签： html5 html javascript

本文链接：https://blog.csdn.net/weixin_51311218/article/details/112306468

版权

大前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

使用dom对象完成复选框的全选，取消全选和反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用dom对象完成复选框的反选</title>
    <script>

        // 全选
        function allChoose(){
            // 获取input标签所有元素对象
            var inputAll = document.getElementsByTagName("input");
            for(var i = 0;i < inputAll.length;i++){
                //选中操作
                inputAll[i].checked = "true";
            }
        }

        // 全不选
        function notAllChoose(){
            // 获取input标签所有元素对象
            var inputAll = document.getElementsByTagName("input");
            for(var i = 0;i < inputAll.length;i++){
                // 取消选择
                inputAll[i].checked = "";
            }
        }

        // 反选 
        function reAll(){
            // 获取input标签所有元素对象
            var inputAll = document.getElementsByTagName("input");
            for(var i = 0;i < inputAll.length;i++){
                // 把当前复选框状态取反
                inputAll[i].checked = !inputAll[i].checked;
            }
        }
    </script>
</head>
<body>
    <!-- 使用a标签实现 -->
    <a href="javascript:allChoose()">全选</a>&nbsp;&nbsp;&nbsp;
    <a href="javascript:notAllChoose()">全不选</a>&nbsp;&nbsp;&nbsp;
    <a href="javascript:reAll()">反选</a><br><hr>

    <!-- 使用事件和按钮实现 -->
    <button onclick="allChoose()">全选</button>&nbsp;&nbsp;&nbsp;
    <button onclick="notAllChoose()">全不选</button>&nbsp;&nbsp;&nbsp;
    <button onclick="reAll()">反选</button><br>

    <input type="checkbox">抽烟<br>
    <input type="checkbox">喝酒<br>
    <input type="checkbox">烫头<br>
</body>
</html>

Main12138

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
html 使用js中dom对象完成复选框的全选，取消全选和反选

使用dom对象完成复选框的反选<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用dom对象完成复选框的反选</title> <script>
复制链接

扫一扫