如何定位单选按钮的值[重复]

Posted 2023-03-05

【中文标题】如何定位单选按钮的值[重复]

【英文标题】：How to target the value of a radio button [duplicate]

【发布时间】：2018-10-11 20:58:54

【问题描述】：

我正在为移动应用创建一个多页表单，以帮助用户烹饪意大利面。我需要定位用户选择的单选按钮值，以便在计算所需水量和面食量的公式中使用该值。提交表单时将触发计算。提交按钮尚未编码。

var servingSize;
var hungerFactor = document.getElementById("hunger").value;
var noodleType = document.getElementByClass("noodleType").value;
var numPeople = document.getElementById("people").value;

var pastaAmount;
var waterAmount;

function calculate() 

  if (noodleType === "long") 
    servingSize = 1;
   else if (noodleType === "shape") 
    servingSize = 0.75;
   else if (noodleType === "short") 
    servingSize = 0.5;
  

  pastaAmount = numPeople * hungerFactor * servingSize;

  // to change cup to cups depending on amount
  if (pastaAmount > 1) 
    document.getElementById("pastaCalc").innerhtml = pastaAmount + " CUPS OF PASTA";
   else 
    document.getElementById("pastaCalc").innerHTML = pastaAmount + " CUP OF PASTA";
  

  var waterMultiplier; // number to be multiplied by pastaAmount

  if (noodleType === "long") 
    waterMultiplier = 3;
   else 
    waterMultiplier = 2; // for short and shape
  

  waterAmount = pastaAmount * waterMultiplier;

  // to change cup to cups depending on amount
  if (waterAmount > 1) 
    document.getElementById("waterCalc").innerHTML = waterAmount + " CUPS OF WATER";
   else 
    document.getElementById("waterCalc").innerHTML = waterAmount + " CUP OF WATER";
  


calculate();

<div class="page">
  <div class="header">
    <div class="headerIcon"></div>
  </div>
  <h1>How many people are dining?</h1>
  <p>MOVE THE SLIDER</p>
  <div class="sliderContainer">
    <input type="range" min="1" max="8" value="4" id="people" class="slider">
  </div>
</div>
<div class="page">
  <div class="header">
    <div class="headerIcon"></div>
  </div>
  <h1>How hungry are the diners?</h1>
  <p>MOVE THE SLIDER</p>
  <div class="sliderContainer">
    <input type="range" min="1" max="8" value="4" class="slider" id="hunger">
  </div>
</div>
<div class="page">
  <div class="header">
    <div class="headerIcon"></div>
  </div>
  <h1>What kind of pasta are you cooking?</h1>
  <ul id="radioHolder">
    <li><label>MACARONI</label><input type="radio" name="radio" class="noodleType" value="short"></li>
    <li><label>SPAGHETTI</label><input type="radio" name="radio" class="noodleType" value="long"></li>
    <li><label>FARFALLE</label><input type="radio" name="radio" class="noodleType" value="shape"></li>
    <li><label>RAVIOLI</label><input type="radio" name="radio" class="noodleType" value="shape"></li>
    <li><label>LINGUINE</label><input type="radio" name="radio" class="noodleType" value="long"></li>
    <li><label>PENNE</label><input type="radio" name="radio" class="noodleType" value="short"></li>
  </ul>
</div>

【问题讨论】：

没有document.getElementByClass()这样的功能。有document.getElementsByClassName()，但它返回所有该类的元素，而不仅仅是选中的元素。

【参考方案1】：

getElementByClass("noodleType") 不是函数。

您可以改用getElementsByClassName("noodleType")，它将返回一个包含此类元素的数组。在您的情况下，您必须循环它们并获取被检查的值。

【讨论】：

getElementsByClassName