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>
  • 相关阅读:
    gson Expected BEGIN_OBJECT but was BEGIN_ARRAY at line 1 column 2 path
    angularjs-$interval使用
    angularjs的页面拆分思想
    桌面工具的分享
    怎么理解高内聚低耦合
    sqlserver 还原数据库
    Sqlserver 读取EXCEL
    Search everything 使用说明
    根据文件大小搜索电脑文件
    一个不错的录屏的软件的分享
  • 原文地址:https://www.cnblogs.com/Yangyecool/p/13171695.html
Copyright © 2011-2022 走看看