密码显示/隐藏切换与全选/全不选/反选

最新推荐文章于 2024-05-13 17:57:15 发布

Y.Later

最新推荐文章于 2024-05-13 17:57:15 发布

阅读量150

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_71437031/article/details/126200004

版权

密码显示/隐藏切换

代码：

<body>
    <input type="password" name="" id="pwd"> <input type="button" value="eye" onclick="fn()">
    <script>
        function fn() {
            // 声明变量，获取密码框
            var pwd = document.getElementById("pwd");
            // 判断
            if (pwd.type == "password") {
                pwd.type = "text"
            } else {
                pwd.type = "password"
            }
        }
    </script>
</body>

效果图：

全选/全不选/反选

代码：

<!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>
    <style>
        ul {
            list-style: none;
        }
    </style>
</head>

<body>
    <p><input type="checkbox" name="" id="checkAll">全选/全不选 | <input type="checkbox" id="fanxuan">反选</p>
    <hr>
    <ul>
        <li><input type="checkbox">香蕉</li>
        <li><input type="checkbox">苹果</li>
        <li><input type="checkbox">葡萄</li>
        <li><input type="checkbox">芒果</li>
        <li><input type="checkbox">桃</li>
        <li><input type="checkbox">梨</li>
    </ul>
    <script>
        // 声明一个全选框的变量,并获取全选框
        var checkAll = document.querySelector("#checkAll");
        // 声明一个所有水果选项的变量,并获取ul里每一个水果选项的复选框
        var inputAll = document.querySelectorAll("li input");
        // 声明一个反选的变量获取反选框
        var fanxuan = document.querySelector("#fanxuan");
        // 给全选框一个点击事件
        checkAll.onclick = function() {
                // 循环每一个水果选项,点击全选,让水果选项的选中状态和全选保持一致
                for (var i = 0; i < inputAll.length; i++) {
                    inputAll[i].checked = checkAll.checked
                }
            }
            // 循环所有水果选项
        for (var i = 0; i < inputAll.length; i++) {
            // 给每一个水果选项一个点击事件
            inputAll[i].onclick = function() {
                // 定义一个被选中状态的水果选项数量的初始值
                var count = 0;
                // 循环被选中水果的选项
                for (var j = 0; j < inputAll.length; j++) {
                    // 判断如果选项被选中,count++
                    if (inputAll[j].checked == true) {
                        count++;
                    }
                }
                // 判断如果count++的值达到水果选项的总数,全选框为选中状态,反之有任意一个选项未被选中,全选框则为未选中状态
                if (count == inputAll.length) {
                    checkAll.checked = true;
                } else {
                    checkAll.checked = false;
                }
            }
        }
        fanxuan.onclick = function() {
            // 循环每一个水果选项,点击取反
            for (var i = 0; i < inputAll.length; i++) {
                inputAll[i].checked = !inputAll[i].checked;
            }
        }
    </script>
</body>

</html>

效果图：