JS小实例笔记三——全选、反选、全不选

最新推荐文章于 2023-07-18 11:18:07 发布

Thaley

最新推荐文章于 2023-07-18 11:18:07 发布

阅读量424

点赞数

分类专栏： JS实例文章标签： javascript 前端

本文链接：https://blog.csdn.net/Thaley/article/details/122381355

版权

JS实例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JS小实例笔记三——全选、反选、全不选及优化

首先要了解选中的三种形式

①.用户手动点击勾选

②.标签中写的checked

③.JS操作dom

图示如下：

创建文件demo.html

<!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>全选、反选、全不选</title>
</head>

<body>
    <form action="">
        <p><input type="checkbox" name="" id="">A</p>
        <p><input type="checkbox" name="" id="">B</p>
        <p><input type="checkbox" name="" id="">C</p>
        <p><input type="checkbox" name="" id="">D</p>
    </form>
    <button>全选</button>
    <button>反选</button>
    <button>全不选</button>
</body>

</html>
<!--  
    选中的三种形式
        ①.用户手动点击勾选
        ②.标签中写的checked
        ③.JS操作dom  -->
<script>
    let button = document.getElementsByTagName('button');
    let input = document.getElementsByTagName('input');
    //全选
    button[0].onclick = function() {
        for (let i = 0; i < input.length; i++) {
            input[i].checked = true;
        }
    };
    //反选
    button[1].onclick = function() {
        for (let i = 0; i < input.length; i++) {
            input[i].checked = !input[i].checked;
        }
    };
    //全不选
    button[2].onclick = function() {
        for (let i = 0; i < input.length; i++) {
            input[i].checked = false;
        }
    }
</script>

文件demo.html的优化

<!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>全选、反选、全不选</title>
</head>

<body>
    <form action="">
        <p><input type="checkbox" name="" id="">A</p>
        <p><input type="checkbox" name="" id="">B</p>
        <p><input type="checkbox" name="" id="">C</p>
        <p><input type="checkbox" name="" id="">D</p>
    </form>
    <button onclick="getAll(0)">全选</button>
    <button onclick="getAll(1)">反选</button>
    <button onclick="getAll(2)">全不选</button>
</body>

</html>
<!--  
    选中的三种形式
        ①.用户手动点击勾选
        ②.标签中写的checked
        ③.JS操作dom  -->
<script>
    let button = document.getElementsByTagName('button');
    let input = document.getElementsByTagName('input');
    //重复内容可以进行封装。这里封装为函数，进行优化
    function getAll(num) {
        for (let i = 0; i < input.length; i++) {
            if (num == 0) {
                input[i].checked = true;
            } else if (num == 1) {
                input[i].checked = !input[i].checked;
            } else {
                input[i].checked = false;
            }
        }
    }
</script>