JavaScript练习2——全选反选按钮

云中键仙

于 2023-09-25 21:32:47 发布

阅读量104

点赞数

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

本文链接：https://blog.csdn.net/qq_45842677/article/details/133280335

版权

JavaWeb 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用JavaScript在HTML中实现全选、反选功能，包括利用`Array.from`处理checkbox元素，以及如何通过按钮控制选项状态。作者还讨论了不同场景下的代码优化和传值方法。

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

需求

代码

基础功能

全选

1.勾全选，唱跳Rap篮球四个选项全选

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title></title>
        <style>
        
        </style>
    </head>
    <body>
        <input type="button" value="全选">
        <input type="checkbox" onclick="checkAll()"/>全选
        <input type="checkbox"/>反选
        <hr/>
        <div id="cbs">
            <input type="checkbox"/>唱
            <input type="checkbox"/>跳
            <input type="checkbox"/>Rap
            <input type="checkbox"/>篮球
        </div>
    </body>
    <script>
        const checkAll = () =>{
            //Prototype 原型
            let eles = document.getElementById("cbs").getElementsByTagName("input");
            console.log(eles);
            // forEach是对数而言的
            let eleArr = Array.from(eles);
            console.log(eleArr);
            eleArr.forEach((ele)=>{
                ele.checked = true;
            })
        }
    </script>
</html>

遍历之前Array.from的原因：

forEach是针对数而言的，eles的Prototype是HTMLCollection，要转换成Prototype是Array(0)才行

2.取消全选的勾选后，四个选项要同步取消勾选

即全选按钮和四个选项的checked一致，可以先读取一下

点击全选true，取消false。然后配合注释掉的代码使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title></title>
        <style>
        
        </style>
    </head>
    <body>
        <input type="button" value="全选">
        <input type="checkbox" onclick="checkAll(this)"/>全选
        <input type="checkbox"/>反选
        <hr/>
        <div id="cbs">
            <input type="checkbox"/>唱
            <input type="checkbox"/>跳
            <input type="checkbox"/>Rap
            <input type="checkbox"/>篮球
        </div>
    </body>
    <script>
        const checkAll = (myObj) =>{
            console.log(myObj.checked);
            //Prototype 原型
            let eles = document.getElementById("cbs").getElementsByTagName("input");
            console.log(eles);
            // forEach是对数而言的，
            let eleArr = Array.from(eles);
            console.log(eleArr);
            eleArr.forEach((ele)=>{
                ele.checked = myObj.checked;
            })
        }
    </script>
</html>

以上就是全选功能的实现。

反选

依旧和check有关，不过和全选不同的是，不是和反选按钮的check有关，而是和四个选项自身check有关。

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title></title>
        <style>
        
        </style>
    </head>
    <body>
        <input type="button" value="全选">
        <input type="checkbox" onclick="checkAll(this)"/>全选
        <input type="checkbox" onclick="checkRecv()"/>反选
        <hr/>
        <div id="cbs">
            <input type="checkbox"/>唱
            <input type="checkbox"/>跳
            <input type="checkbox"/>Rap
            <input type="checkbox"/>篮球
        </div>
    </body>
    <script>
        const checkAll = (myObj) =>{
            console.log(myObj.checked);
            //Prototype 原型
            let eles = document.getElementById("cbs").getElementsByTagName("input");
            console.log(eles);
            // forEach是对数而言的，
            let eleArr = Array.from(eles);
            console.log(eleArr);
            eleArr.forEach((ele)=>{
                ele.checked = myObj.checked;
            })
        }

        const checkRecv = ()=>{
            let eles = document.getElementById("cbs").getElementsByTagName("input");
            let eleArr = Array.from(eles);
            eleArr.forEach((ele)=>{
                console.log(!ele.checked);
                ele.checked = !ele.checked;
            })
        }
    </script>
</html>

升级

现在不用checkbox实现功能了，用按钮实现。

如何知道四个选项之前是选中还是非选中状态？

按钮没有checked值，就需要我们造一个，即创建一个变量用来存储选项状态。

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title></title>
        <style>
        
        </style>
    </head>
    <body>
        <input type="button" value="全选" onclick="checkAll()">
        <hr/>
        <div id="cbs">
            <input type="checkbox"/>唱
            <input type="checkbox"/>跳
            <input type="checkbox"/>Rap
            <input type="checkbox"/>篮球
        </div>
    </body>
    <script>
        // 正选反选引伸出的常见问题
        // js传值 
        //   1.从元素身上找值
        //   2.自己创建公共变量 存储过程中的值

        let myBol = false;
        const checkAll = ()=>{
            myBol = !myBol
            console.log(myBol);

            let eles = document.getElementById("cbs").getElementsByTagName("input");
            console.log(eles);
            let eleArr = Array.from(eles);
            console.log(eleArr);
            eleArr.forEach((ele)=>{
                ele.checked = myBol;
            })

        }
    </script>
</html>