如何获取单选按钮选中值？移动端意面烹饪计算表单开发求助

嘿，我来帮你搞定这个移动端意面表单的计算逻辑和提交按钮的实现问题！

1. 先修正代码里的小错误 #

你当前的代码片段里有几个拼写/方法使用问题：

• document.getElementByClass 是拼写错误，正确写法是 document.getElementsByClassName，但这个方法返回的是元素集合，单选按钮需要获取选中项的值，所以这个方法不太适用哦。
• document.getEle... 应该是 document.getElementById("numPeople") 吧？假设人数是通过id为numPeople的输入框或单选组来获取的。

2. 正确获取单选按钮选中值 #

如果你的饥饿程度（hunger）、面条类型（noodleType）是单选组，建议给每个单选按钮设置相同的name属性（比如饥饿组name设为hunger，面条组设为noodleType），然后用document.querySelector快速获取选中值：

// 获取饥饿程度单选组的选中值，加?.避免未选中时报错
const hungerFactor = document.querySelector('input[name="hunger"]:checked')?.value;
// 获取面条类型单选组的选中值
const noodleType = document.querySelector('input[name="noodleType"]:checked')?.value;
// 获取人数（假设是id为numPeople的输入框）
const numPeople = parseInt(document.getElementById("numPeople").value);

3. 实现提交按钮与核心计算逻辑 #

首先在HTML里添加提交按钮（假设你的表单id是pastaForm）：

<form id="pastaForm">
  <!-- 你的表单元素：单选组、人数输入框等 -->
  <button type="submit">计算所需食材</button>
</form>

然后编写JavaScript监听表单提交事件，阻止默认跳转，执行计算：

// 获取表单DOM元素
const pastaForm = document.getElementById("pastaForm");

// 监听表单提交事件
pastaForm.addEventListener("submit", function(e) {
  // 阻止默认的表单跳转行为（移动端尤其重要）
  e.preventDefault();

  // 1. 收集所有表单值
  const hungerFactor = document.querySelector('input[name="hunger"]:checked')?.value;
  const noodleType = document.querySelector('input[name="noodleType"]:checked')?.value;
  const numPeople = parseInt(document.getElementById("numPeople").value);

  // 校验必填项：确保所有信息都已填写/选择
  if (!hungerFactor || !noodleType || isNaN(numPeople) || numPeople <= 0) {
    alert("请完善所有必填信息哦！");
    return;
  }

  // 2. 自定义计算公式（这里给你一个示例，你可以根据需求调整）
  let servingSize, waterAmount;
  // 根据饥饿程度设置分量系数
  const hungerMultiplier = hungerFactor === "light" ? 0.8 : hungerFactor === "normal" ? 1 : 1.2;
  // 根据面条类型设置每人基础意面量（单位：克）
  const basePastaPerPerson = noodleType === "spaghetti" ? 100 : 120;

  // 计算最终意面量
  servingSize = basePastaPerPerson * numPeople * hungerMultiplier;
  // 计算水量：一般每100克意面需要1升水，转换为毫升
  waterAmount = (servingSize / 100) * 1000;

  // 3. 展示计算结果（可以弹窗显示，也可以插入到页面指定区域）
  alert(`你需要准备：\n意面：${Math.round(servingSize)}克\n水量：${Math.round(waterAmount)}毫升`);
});

4. 移动端适配小技巧 #

• 给单选按钮的label标签设置足够的padding，扩大触摸点击区域，方便用户操作。
• 提交按钮设置足够的高度（比如height: 48px）和字体大小，提升移动端交互体验。

内容的提问来源于stack exchange，提问作者Emily E