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基础笔记-类与对象(多态)
    oracle中trim,ltrim,rtrim函数用法
    git stash
    update from select
    oracle 查看主外键约束
    eclipse git 解决冲突
    根据Request获取客户端IP
    简单说说Spring Security 使用(附加验证码登录,自定义认证)
    linux的nohup命令的用法
    Python包管理工具介绍
  • 原文地址:https://www.cnblogs.com/Yangyecool/p/13171695.html
Copyright © 2011-2022 走看看