javascript - 切换语句javascript

Question

我已经为此搜索了很长时间，但我仍然一无所知。我正在尝试为一个根据 Material 类型计算价格的网站做一个简单的计算器。我似乎无法让它工作。它一直直接进入下面 switch 语句的默认情况。

<div class="form-group">
<div class="btn-group" data-toggle="buttons" class="col-lg-3 col-lg-offset-10">
            <label class="btn btn-default **active**">
            <input type="radio" name="inputWalls" id="inputWalls" value="block" checked>Block</label>
            <label class="btn btn-default">
            <input type="radio" name="inputWalls" id="inputWalls" value="brick">Brick </label>
            <label class="btn btn-default">
            <input type="radio" name="inputWalls" id="inputWalls" value="stone">Stone </label>

JavaScript

function quote(){
      var blockPrice = 0;
      var brickPrice = 0;
      var stonePrice = 0;
      var myWidth =  parseFloat(document.getElementById("widthInput").value);
      var myHeight = parseFloat(document.getElementById("heightInput").value);
      var radioButtons = document.getElementsByName("inputWalls");
      var totalArea = myWidth + myHeight;

    switch(radioButtons){
    case "block" :

        blockPrice = totalArea * 1.90;
        alert(blockPrice);
        break;

    case "brick" :
    {
        brickPrice = totalArea * 3.80;
        alert(brickPrice);
        break;
    }
    case "stone" :
    {
        stonePrice = totalArea * 4.90;
        alert(stonePrice);
        break;
    }
    default :
      alert('you have not selected material');
  }
}

Answer 1

第一个警告标志:您真的不应该拥有多个具有相同 ID 的东西。

一旦您拥有每个选项的唯一 ID，您就可以检查每个元素的 checked 属性。

<label class="btn btn-default **active**">
<input type="radio" name="inputWalls" id="inputWalls_block" value="block" checked>Block</label>
<label class="btn btn-default">
<input type="radio" name="inputWalls" id="inputWalls_brick" value="brick">Brick </label>

其次是:

document.getElementById("inputWalls_block").checked

显然，您可以将其包装起来，这样您就不必拥有大量重复代码:

function getCheckedSection() 
{
  var sections=["block", "brick", "stone"];
  for ( var i=0;i< sections.length; i++ )
  {
    if ( document.getElementById("inputWalls_"+sections[i]).checked )
    {
        return sections[i];
     }
  }
}

当然，这是 JavaScript 并且与 DOM 交互，使用 JQuery 可以节省大量时间和精力，但是如果你想弄清楚这些东西在没有支持库的情况下是如何工作的，那就是有用的知识。

您可以在 the answers to this question. 中找到更多关于此的有用信息