04-js全选，全不选和反选

最新推荐文章于 2024-08-04 16:33:59 发布

沈川希

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量138

点赞数

分类专栏： DOM基础文章标签： javascript dom

本文链接：https://blog.csdn.net/weixin_45344023/article/details/107826259

版权

DOM基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

全选，全不选和反选

代码

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>全选</button>
    <button>全不选</button>
    <button>反选</button><br>
    <input type="checkbox" type="text"><br>
    <input type="checkbox" type="text"><br>
    <input type="checkbox" type="text"><br>
    <input type="checkbox" type="text"><br>
    <input type="checkbox" type="text"><br>
    <input type="checkbox" type="text"><br>


   
    
</body>
</html>

js部分

 <script>
        let btn = document.getElementsByTagName("button");
        let inputs = document.getElementsByTagName("input");

        //全选
        btn[0].onclick = ()=>{
            // DOM0方式设置属性节点  inputs[i]表示每一个input
            for(let i = 0;i < inputs.length;i++)
            {
                inputs[i].checked = true;		//复选框内全部赋值为true
            }
        }

        //全不选
        btn[1].onclick = ()=>{
            for(let i = 0;i < inputs.length;i++)
            {
                inputs[i].checked = false;		//复选框内全部赋值为false
            }
        }

        //反选
        btn[2].onclick = () =>{
            for(let i = 0;i < inputs.length;i++)
            {
                 // 经典代码
                inputs[i].checked = !(inputs[i].checked)		//选中的赋值为没有选中
                																	//没有选中的赋值为选中
            }
        }

 </script>

运行结果
在这里插入图片描述

沈川希

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
04-js全选，全不选和反选

全选，全不选和反选代码html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body&g
复制链接

扫一扫

专栏目录