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

机器学习之心AI
135 阅读5分钟

2.二级菜单折叠。通过给定的CSS样式实现以下功能：
单击考勤管理、信息中心和协同办公的任一项，如果当前二级菜单是折叠状态，则展开，同时其余项折叠；如果当前二级菜单状态是展开，则折叠。
3.填写并验证注册信息，具体要求如下：
用户名称：长度412，数字英文大小写字母；
密码：长度816，大小写字母、数字或下划线；
确认密码：两次密码输入一致，不一致则提示错误；
手机号码：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>

在这里插入图片描述
③填写并验证注册信息，具体要求如下：
用户名称：长度412，数字英文大小写字母；
密码：长度816，大小写字母、数字或下划线；
确认密码：两次密码输入一致，不一致则提示错误；
手机号码：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>
                <th>手机号码：</th>
                <td><input type="text" name="tel" placeholder="13、14、15、17、18开头的11位手机号"></td>
                <td><div></div></td>
              </tr>
              <tr>
                <th>电子邮箱：</th>
                <td><input type="text" name="email" placeholder="用户名@域名（域名后缀至少2个字符）"></td>
                <td><div></div></td>
              </tr>
              <tr><td colspan="3"><input type="submit" value="注册"></td></tr>
            </table>
          </form>
      </div>
    </div>
    <script src="form.js"></script>
  </body>
</html>

form.js

 // 表单验证函数
 function validateForm(form) {
    // 获取表单元素和错误提示元素
    const usernameInput = form.username;
    const pwdInput = form.pwd;
    const repwdInput = form.repwd;
    const telInput = form.tel;
    const emailInput = form.email;
    const usernameError = usernameInput.parentNode.nextElementSibling.firstElementChild;
    const pwdError = pwdInput.parentNode.nextElementSibling.firstElementChild;
    const repwdError = repwdInput.parentNode.nextElementSibling.firstElementChild;


![img](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4c314233db5a42cdb4a7ceb0ea7dbda0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5py65Zmo5a2m5Lmg5LmL5b-DQUk=:q75.awebp?rk3s=f64ab15b&x-expires=1772472126&x-signature=F8lrz3Wt8rPqi80rlM%2B9u%2Fak%2Fmk%3D)
![img](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a7e76a348fed4fcdb0dd8c43217f3295~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5py65Zmo5a2m5Lmg5LmL5b-DQUk=:q75.awebp?rk3s=f64ab15b&x-expires=1772472126&x-signature=WFbHxYZM1P9HKE0LsbTHl%2FJYolU%3D)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

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


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
avatar
文章
阅读
粉丝