当前位置：首页 > news >正文

蓝桥杯 - 中等 - 健身大调查

news 来源：原创 2025/6/29 23:17:17

介绍

表单提交是前端必备的技能之一，下面让我们用学过的表单知识，来完成一个健身调查的问卷。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── css
│   └── style.css
├── index.html
└── js
    └── index.js

其中：

index.css 为样式文件。
index.html 为主页面。
index.js 需要补充的 js 文件。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

wget https://labfile.oss.aliyuncs.com/courses/10591/03.zip&&unzip  03.zip&&rm 03.zip

在浏览器中预览 index.html 页面效果如下：

目标

完成 js/index.js 中的 formSubmit 函数，用户填写表单信息后，点击蓝色提交按钮，表单项隐藏，页面显示用户提交的表单信息（在 id 为 result 的元素显示）。信息格式如下：“身高 172cm，体重 60kg，性别男，会在健身房、公园锻炼”。注意：检测时会模拟表单填写过程，请不要为 id 为 result 的元素赋固定值。

规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
请勿修改项目中提供的 id、class、函数名等名称，以免造成无法判题通过。

判分标准

本题完全实现题目目标得满分，否则得 0 分。

代码

// index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>健身大调查</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <!-- 表单内容部分 -->
    <div id="quescontent">
      <h1 class="title">健身调查问卷</h1>
      <form id="myForm">
        <div class="form-group">
          <h3>1.基本</h3>
          <div class="form-item">
            <label for="height"
              >身高：<input
                id="height"
                name="height"
                type="text"
              />&nbsp;cm</label
            >
          </div>
          <div class="form-item">
            <label for="weight">
              体重：<input
                id="weight"
                name="weight"
                type="text"
              />&nbsp;kg</label
            >
          </div>
        </div>
        <div class="form-group">
          <h3>2.你的性别是</h3>
          <label for=""
            ><input type="radio" name="male" id="male" value="0" />男
          </label>
          <label for=""
            ><input type="radio" name="male" id="female" value="1" />女</label
          >
        </div>
        <div class="form-group">
          <h3>3.你在下面哪些地点健身锻炼</h3>
          <div class="form-item">
            <input type="checkbox" name="place" id="park" value="1" />公园
          </div>
          <div class="form-item">
            <input type="checkbox" name="place" id="gym" value="2" />健身房
          </div>
          <div class="form-item">
            <input type="checkbox" name="place" id="outdoor" value="3" />户外
          </div>
        </div>
      </form>
      <button class="btn" onclick="formSubmit()">提交</button>
    </div>
    <!-- 表单提交完成后显示的部分 -->
    <div id="result" style="display: none">问卷提交完毕，感谢您的参与！</div>
    <script src="./js/index.js"></script>
  </body>
</html>

// index.js

function formSubmit() {
  // TODO：待补充代码
  // 1.获取表单的值
  // 获取身高的值 输入框
  let height = document.getElementById('height').value
  // 获取体重的值 输入框
  let weight = document.getElementById('weight').value
  console.log(height,weight)
  // 获取性别 单选框
  let sex = document.querySelector('[type="radio"]:checked').nextSibling.textContent.trim()
  console.log(sex);
  // 获取地点 多选框
  let place = document.querySelectorAll('[name="place"]:checked')
  let arr = []
  place.forEach(item=>{
    return arr.push(item.nextSibling.textContent.trim())
  })
  console.log(place,arr);
  const result = document.getElementById('result')
  result.innerHTML += `<br>身高${height}cm,体重${weight}kg,性别${sex}，会在${arr.join('、')}锻炼。`
  document.getElementById('quescontent').style.display = 'none'
  result.style.display = 'block'

}

说明

函数定义和整体功能：
formSubmit 函数的主要功能是获取表单中各个输入项的值，然后将这些值展示在页面的 result 区域，并隐藏原来的表单区域，显示提交完成的提示信息。
获取身高和体重的值：
使用 document.getElementById('height') 获取到 id 为 height 的输入框元素，然后通过 .value 属性获取该输入框中的文本内容，并将其赋值给 height 变量。体重的获取同理。
获取性别的值（单选框）：

let sex = document.querySelector('[type="radio"]:checked').nextSibling.textContent.trim()
console.log(sex);

document.querySelector('[type="radio"]:checked')：这部分代码使用 querySelector 方法在文档中查找第一个 type 属性为 radio 且被选中（checked）的单选框元素。querySelector 方法接受一个 CSS 选择器作为参数，[type="radio"]:checked 就是一个 CSS 选择器，表示选中的单选框。
.nextSibling：获取到选中的单选框元素后，使用 nextSibling 属性获取该元素的下一个兄弟节点，这里下一个兄弟节点是包含文本内容（如 "男" 或 "女"）的文本节点。
.textContent：获取文本节点的文本内容。
.trim()：使用 trim 方法去除文本内容两端的空白字符（如空格、换行符等），最终将处理后的性别文本赋值给 sex 变量，并打印出来。

4.获取地点的值（多选框）：

let place = document.querySelectorAll('[name="place"]:checked')
let arr = []
place.forEach(item=>{
  return arr.push(item.nextSibling.textContent.trim())
})
console.log(place,arr);

document.querySelectorAll('[name="place"]:checked')：使用 querySelectorAll 方法查找所有 name 属性为 place 且被选中（checked）的多选框元素，querySelectorAll 会返回一个包含所有匹配元素的 NodeList 对象，并赋值给 place 变量。
创建一个空数组 arr 用于存储选中的地点文本。
place.forEach(...)：使用 forEach 方法遍历 place 这个 NodeList 对象，对于每个选中的多选框元素 item，执行回调函数。
在回调函数中，item.nextSibling.textContent.trim() 的作用和获取性别时类似，先获取多选框元素的下一个兄弟节点的文本内容，然后去除两端空白字符，最后使用 arr.push(...) 将处理后的文本添加到 arr 数组中。最终打印出 place（选中的多选框元素集合）和 arr（包含选中地点文本的数组）。

5.展示结果并隐藏表单：

const result = document.getElementById('result')
result.innerHTML += `<br>身高${height}cm,体重${weight}kg,性别${sex}，会在${arr.join('、')}锻炼。`
document.getElementById('quescontent').style.display = 'none'
result.style.display = 'block'