zoukankan      html  css  js  c++  java
  • 前端学习笔记之多选框

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>多选框</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }

            ul {
                list-style: none;
                display: flex;
            }
        </style>
    </head>

    <body>
        <form action="">
            <ul>
                <li>
                    西瓜<input type="checkbox">
                </li>
                <li>
                    苹果<input type="checkbox">
                </li>
                <li>
                    葡萄<input type="checkbox">
                </li>
                <li>
                    榴莲<input type="checkbox">
                </li>
            </ul>
            <input type="button" value="全选" id="all_btn">
            <input type="button" value="全不选" id="notall_btn">
            <input type="button" value="反选" id="invert">
        </form>
        <script>
            let all_btn = document.getElementById("all_btn");
            let notall_btn = document.getElementById("notall_btn");
            let invert = document.getElementById("invert");
            let check = document.querySelectorAll(`input[type="checkbox"]`);
            all_btn.onclick = function () {
                check.forEach((item) => {
                    item.checked = true;
                })
            };
            notall_btn.onclick = function () {
                check.forEach((item) => {
                    item.checked = false;
                })
            };
            invert.onclick = function () {
                check.forEach((item) => {
                    // item.checked ? item.checked = true : item.checked = false;
                    item.checked=!item.checked;
                })
            };
        </script>
    </body>

    </html>
  • 相关阅读:
    Java怎样对一个属性设置set或get方法的快捷键
    小程序怎样控制rich-text中的<img>标签自适应
    Java中Arrys数组常用的方法
    Java 怎样实现调用其他方法
    Java保留两位小数
    解决ajax请求跨域
    rand(7) 到rand(10)
    c++生成随机数
    批量该文件名
    正则表达式(=)
  • 原文地址:https://www.cnblogs.com/Yangyecool/p/13171695.html
Copyright © 2011-2022 走看看