我需要使用DOM計算一些選中的單選按鈕的值

Question

到目前為止，我的代碼是：HTML

<input type="radio" name="age" value="0">1-25
<input type="radio" name="age" value="5">26-27
<input type="radio" name="age" value="7">28-29

<input type="radio" name="bmi" value="0">0-25
<input type="radio" name="bmi" value="0">26-30
<input type="radio" name="bmi" value="9">31-35

所以我需要獲取選中的單選按鈕的值並計算它們

Javascript是我得到的第一個答案

function CalculateValue(){
  //call getAgeValue(), getBmiValue() here and do desired calculations here
}

function getAgeValue()
{
    for (var i = 0; i < document.getElementsByName('age').length; i++)
    {
        if (document.getElementsByName('age')[i].checked)
        {
            return document.getElementsByName('age')[i].value;
        }
    }
}

function getBmiValue()
{
    for (var i = 0; i < document.getElementsByName('bmi').length; i++)
    {
        if (document.getElementsByName('bmi')[i].checked)
        {
            return document.getElementsByName('bmi')[i].value;
        }
    }

Answer 1

利用香草document.querySelector

function doCalculation(ageValue, bmiValue) {
    // whatever
    return ageValue + bmiValue;
}

function getRadioValue(radio_name) {
    return ( // parenthesis to let us do an OR
      document.querySelector('input[type="radio"][name="' + radio_name + '"]:checked')
      || // or if none is checked
      {} // so we don't get an error
    ).value;
}

function handlerForButton(e) {
    var age = +getRadioValue('age'),
        bmi = +getRadioValue('bmi'),
        foo = doCalculation(age, bmi);
    // do whateverwith foo
    console.log(foo);
}

// after elements exist
document.querySelector('input[type="button"][value="Calculate"]')
    .addEventListener('click', handlerForButton);

演示

您可能會發現，使用類和ID來查找元素比使用其他屬性更容易找到它們。 這也將提高性能