大数据H5前端开发——DOM_单击“全选”复选框,同时选中或取消选中运动,唱歌和写代码的复选框(3)

本文链接：https://blog.youkuaiyun.com/2401_84187635/article/details/138898151

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

手机号码：13、14、15、17、18开头的11位手机号；
电子邮箱：用户名@域名（域名后缀至少2个字符）；
所有输入不允许为空。

代码与效果
1.实验代码

①全选功能。页面有4个复选框和一个按钮，按钮初始化是不可用状态。实现以下功能：
（1）单击“全选”复选框，同时选中或取消选中运动、唱歌和写代码复选框。
（2）运动、唱歌和写代码复选框都选中时，全选复选框也同时选中。
（3）运动、唱歌和写代码复选框有至少一个未选中时，全选复选框取消选中。
（4）运动、唱歌和写代码复选框有至少一个选中时，“现在提交”按钮可用。
完整代码：

<!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>Document</title>
</head>
<body>
    <input type="checkbox" name="fun">运动
    <input type="checkbox" name="fun">睡觉
    <input type="checkbox" name="fun">写代码
    <input type="checkbox" id="allcheck">全选
    <button disabled>现在提交</button>
    <script>
        //获取运动唱歌写代码输入框
        var inputs=document.querySelectorAll('input[name="fun"]');
        //console.log(inputs);
        //获取提交按钮
        var btn=document.querySelector('button');
        //获取全选框
        var allcheck=document.getElementById('allcheck');
        var arr=[];
        //将运动唱歌写代码input改成数组形式
       for (let i = 0; i < inputs.length; i++){
                arr.push(inputs[i]);
            }
        //全选功能
        allcheck.onclick = function() {
            for (let i =0; i < arr.length; i++){
                arr[i].checked=this.checked;
            }
         //激活提交按钮
         check();
            }

        //任选一个爱好激活提交按钮
        for (let i = 0;i < arr.length;i++){
            arr[i].onclick = function(){
                check();
           
        //选完全部爱好，全选框被激活
        allcheck.checked=arr.every(function (item) {
            return item.checked==true;
        });
        }}

        //激活提交按钮功能封装成函数
        function check() {
            var d=arr.some(function (item){
    return item.checked == true;

            });
            btn.disabled=!d;
        }
    </script>
</body>
</html>

在这里插入图片描述

代码解析：
这是一个简单的HTML页面，主要实现了选择爱好后提交按钮才能被激活的功能。

首先，在HTML中定义了几个输入框，其中三个是复选框，用来表示用户的不同爱好，另外一个是全选框，用来实现一键选择全部爱好的功能。最后有一个禁用的提交按钮，用来表示在没有选择任何爱好时是无法提交的。

在JavaScript代码中，首先通过querySelectorAll方法和属性选择器来获取所有的名称为“fun”的输入框，并且将它们转换成数组形式，方便后续的操作。此外还通过getElementById方法获取全选框和querySelector方法获取提交按钮。

然后，定义了点击全选框的事件，当全选框被点击时，将所有的爱好复选框的选择状态都设置成与全选框相同的状态，并且调用了check函数来判断是否需要激活提交按钮。

接下来，为每个爱好复选框都定义了一个点击事件，当任意一个爱好被选中时，调用check函数来判断是否需要激活提交按钮，并且判断是否需要将全选框的选择状态修改为全部爱好都被选中。

最后，定义了check函数，主要用来判断是否存在至少一个已被选中的爱好，如果存在则激活提交按钮，否则禁用提交按钮。最后通过some方法来判断是否有输入框被选中，如果存在被选中的输入框，则返回true，此时提交按钮会被激活。

②二级菜单折叠。通过给定的CSS样式实现以下功能：
单击考勤管理、信息中心和协同办公的任一项，如果当前二级菜单是折叠状态，则展开，同时其余项折叠；如果当前二级菜单状态是展开，则折叠。
form.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单折叠</title>
    <style>
        li {
            /*取消li小圆点*/
            list-style: none;
            line-height: 2;
        }

        li li {
            line-height: 1.6;
        }

        li span {
            /*给 span 标签设置背景图片（开头的小加号小减号，no-repeat不循环，初始位置 0 0）*/
            background: url(+.png) no-repeat left center;
            padding-left: 30px;
        }

        /*起始样式*/
        li ul {
            height: 0;
            /*溢出隐藏*/
            overflow: hidden;
            /*添加过渡效果*/
            transition: all 0.5s;
        }

        /*展开样式*/
        .open {
            background-image: url(-.png);
        }

        .open+ul {
            height: 80px;
        }
    </style>
</head>
<body>

<ul class="tree">
    <li><span>考勤管理</span>
        <ul>
            <li>日常考勤</li>
            <li>请假申请</li>
            <li>加班出差</li>
        </ul>
    </li>
    <li><span>信息中心</span>
        <ul>
            <li>日常考勤</li>
            <li>请假申请</li>
            <li>加班出差</li>
        </ul>
    </li>
    <li><span>协同办公</span>
        <ul>
            <li>日常考勤</li>
            <li>请假申请</li>
            <li>加班出差</li>
        </ul>
    </li>
</ul>

<script>
    const tree = document.querySelector('.tree'); // 获取树形菜单元素
    const spans = tree.getElementsByTagName('span'); // 获取所有的 span 标签
    for (let i = 0; i < spans.length; i++) {
        spans[i].addEventListener('click', function () {
            // 先将所有的 ul 都折叠起来
            const uls = tree.getElementsByTagName('ul');
            for (let j = 0; j < uls.length; j++) {
                uls[j].style.height = '0';
            }
            // 将当前节点的子级 ul 展开或者折叠
            const ul = this.nextElementSibling;
            if (ul.style.height === '0px') {
                ul.style.height = ul.scrollHeight + 'px'; // 展开 ul
                this.classList.add('open'); // 显示减号图标
            } else {
                ul.style.height = '0px'; // 折叠 ul
                this.classList.remove('open'); // 显示加号图标
            }
        });
    }
</script>
</body>
</html>

在这里插入图片描述
③填写并验证注册信息，具体要求如下：
用户名称：长度4~12，数字英文大小写字母；
密码：长度8~16，大小写字母、数字或下划线；
确认密码：两次密码输入一致，不一致则提示错误；
手机号码：13、14、15、17、18开头的11位手机号；
电子邮箱：用户名@域名（域名后缀至少2个字符）；
所有输入不允许为空。

form.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <link rel="stylesheet" href="form.css">
  </head>
  <body>
    <div class="box">
      <div class="box-head">填写注册信息</div>
      <div class="box-body">
        <form onsubmit="return validateForm(this)">
            <table>
              <tr>
                <th>用户名称：</th>
                <td><input type="text" name="username" placeholder="长度4~12，数字英文大小写字母"></td>
                <td><div></div></td>
              </tr>
              <tr>
                <th>密　　码：</th>
                <td><input type="password" name="pwd" placeholder="长度8~16，大小写字母、数字或下划线"></td>
                <td><div></div></td>
              </tr>
              <tr>
                <th>确认密码：</th>
                <td><input type="password" name="repwd" placeholder="请再次输入密码进行确认"></td>
                <td><div></div></td>
              </tr>
              <tr>


![img](https://img-blog.csdnimg.cn/img_convert/bd3c5829b92c5491c742f558387f89d7.png)
![img](https://img-blog.csdnimg.cn/img_convert/7b7f40aaffcaa084b6173e2ce4534b69.png)
![img](https://img-blog.csdnimg.cn/img_convert/8aca01f28fdd75cc27a64c0f4b0bd196.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618545628)**

715739968436)]
[外链图片转存中...(img-3Rklkcan-1715739968436)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.youkuaiyun.com/topics/618545628)**