Question

<html>

<head>
<title>Tip Calculator</title>

<script type="text/javascript"><!--
function calculateBill(){
  var check = document.getElementById("check").value;

  /* I try to get the value selected */
  var tipPercent = document.getElementById("tipPercent").value;

  /* But it always returns the value 15 */   
  var tip = check * (tipPercent / 100)
  var bill = 1 * check + tip;
  document.getElementById('bill').innerHTML = bill;
}
--></script>
</head>

<body>

<h1 style="text-align:center">Tip Calculator</h1>

<form id="f1" name="f1">
Average Service:   15%
<input type="radio" id="tipPercent" name="tipPercent" value="15" />
<br />

Excellent Service: 20%
<input type="radio" id="tipPercent" name="tipPercent" value="20" />
<br /><br />

<label>Check Amount</label>
<input type="text" id="check" size="10" />
<input type="button" onclick="calculateBill()" value="Calculate" />
</form>

<br />
Total Bill: <p id="bill"></p>

</body>
</html>

我尝试使用document.getElementById("tipPercent").value选择值，但它始终返回值15。

Answer 1

在HTML中，ID是唯一的。尝试将id属性更改为tipPercent1，tipPercent2等

Answer 2

两个单选按钮具有相同的ID - 这在HTML中不正确，因为ID应该是唯一的。结果是document.getElementById无法使用。

尝试document.getElementsByName并遍历生成的数组，找出哪个被检查以及它的值是什么。

Answer 3

<input type="radio" id="tipPercent" name="tipPercent" value="15" />
<input type="radio" id="tipPercent" name="tipPercent" value="20" />

首先，id必须是唯一标识符，因此给两个元素具有相同的id会产生问题。 document.getElementById("tipPercent")在尝试获取一个元素之后，那么这两个不同的输入元素中的哪一个应该返回？

其次，您只能检查是否检查了无线电输入，因此您需要遍历所有这些inpud字段并检查选中哪一个以获取当前值。

Answer 4

你有两个相同的ID“tipPercent”。 getElementById只返回一个第一个结果

Answer 5

您应该为每个收音机使用不同的ID。尝试以下内容：

<script type="text/javascript">
//a variable that will hold the index number of the selected radio button
for (i=0;i<document.f1.tipPercent.length;i++){
  if (document.document.f1.tipPercent[i].checked==true)
    var tipPercent= document.f1.tipPercent[i].value;
}
</script>

Answer 6

您可能希望使用以下内容更改calculateBill()功能：

function calculateBill() {  
  var tipPercent = 0;
  var check = document.getElementById("check").value;     
  var radioElements = document.getElementsByName("tipPercent");

  for (var i = 0; i < radioElements.length; i++) {
    if (radioElements[i].checked)
      tipPercent = parseInt(radioElements[i].value);
  }

  var tip = check * (tipPercent / 100)
  var bill = 1 * check + tip;
  document.getElementById('bill').innerHTML = bill;
}

请注意使用document.getElementsByName()，Oded suggested in another answer。

您还应该从收音机中删除id属性：

<input type="radio" name="tipPercent" value="15" />
<input type="radio" name="tipPercent" value="20" />

以下是截图显示上述功能可以正常使用20％单选按钮：

How can I read the value of a radio button in JavaScript? http://img695.imageshack.us/img695/6214/tipcalc.png

Answer 7

元素的id必须是唯一的，因此不能有两个具有相同id的元素。

当您尝试将所有单选按钮作为单个元素时，您将获得其中一个。您获得哪一个完全取决于浏览器如何选择处理您设置的错误ID。您可以获取其中任何一个元素，或者为null，具体取决于实现。在这种情况下，您碰巧使用获取第一个元素的浏览器。

为元素提供自己的ID：

Average Sevice:   15%<input type="radio" id="tipPercent15" name="tipPercent" value="15" />
<br />
Excellent Sevice: 20%<input type="radio" id="tipPercent20" name="tipPercent" value="20" />

从元素中获取value属性只会获得您为每个元素指定的值。相反，您使用了checked属性：

var tipPercent;
if (document.getElementById("tipPercent15").checked) tipPercent = 15;
if (document.getElementById("tipPercent20").checked) tipPercent = 20;

如何在JavaScript中读取单选按钮的值？

7 个答案: