javascript案例8——简易全选、全不选、反选

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

耶啵奶膘

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

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/xulihua_75/article/details/124638713

版权

javascript 专栏收录该内容

56 篇文章 6 订阅

订阅专栏

一、案例描述

点击“全选”，复选框全部选中
点击“全不选”，复选框全部取消
点击“反选”，已选中的取消，未选中的选中。

二、案例效果演示

请添加图片描述

三、案例局部代码

html代码：

 <button onclick="chooseAll()">全选</button>
 <button onclick="notAll()">全不选</button>
 <button onclick="fanxuan()">反选</button>
 <br />
 <input type="checkbox" name="fruit" />苹果
 <input type="checkbox" name="fruit" />香蕉
 <input type="checkbox" name="fruit" />橘子
 <input type="checkbox" name="fruit" />葡萄

js代码：

 <script>
    // 获取所有的的复选框
    var checkboxs = document.getElementsByTagName('input');
    // 点击全选按钮
    function chooseAll() {
        for (var i = 0; i < checkboxs.length; i++) {
            checkboxs[i].checked = true;
        }
    }
    // 点击全不全按钮
    function notAll() {
        for (var i = 0; i < checkboxs.length; i++) {
            checkboxs[i].checked = false;
        }
    }
    // 点击反选按钮
    function fanxuan() {
        for (var i = 0; i < checkboxs.length; i++) {
            if (checkboxs[i].checked == true) {
                checkboxs[i].checked = false;
            } else {
                checkboxs[i].checked = true;
            }
        }
    }
</script>

四、案例整体代码

<!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>
    <button onclick="chooseAll()">全选</button>
    <button onclick="notAll()">全不选</button>
    <button onclick="fanxuan()">反选</button>
    <br />
    <input type="checkbox" name="fruit" />苹果
    <input type="checkbox" name="fruit" />香蕉
    <input type="checkbox" name="fruit" />橘子
    <input type="checkbox" name="fruit" />葡萄

    <script>
        // 获取所有的的复选框
        var checkboxs = document.getElementsByTagName('input');
        // 点击全选按钮
        function chooseAll() {
            for (var i = 0; i < checkboxs.length; i++) {
                checkboxs[i].checked = true;
            }
        }
        // 点击全不全按钮
        function notAll() {
            for (var i = 0; i < checkboxs.length; i++) {
                checkboxs[i].checked = false;
            }
        }
        // 点击反选按钮
        function fanxuan() {
            for (var i = 0; i < checkboxs.length; i++) {
                if (checkboxs[i].checked == true) {
                    checkboxs[i].checked = false;
                } else {
                    checkboxs[i].checked = true;
                }
            }
        }
    </script>
</body>

</html>