How can I read the value of a radio button in JavaScript?_问答_开发者

<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>

I try to get the value selected with document.getElementById("tipPercent").value, but it always returns the value 15.

In HTML, Ids are unique. Try changing the id attributes to tipPercent1, tipPercent2, etc.

Both radio buttons have the same ID - this is incorrect in HTML, as IDs should be unique. The consequence is that document.getElementById cannot be used.

Try document.getElementsByName and loop through the resulting array to find out which one is checked and what its value is.

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

First of all, id's are required to be unique identifiers, so giving two elements the same id will make problems. document.getElementById("tipPercent") after all tries to get one element, so which of those two different input elements should it return?

Second, you can only check if a radio input is checked or not, so you will need to loop through all those inpud fields and check which one is checked to get the current value.

You have two equal ids "tipPercent". getElementById returns only one first result

You should use different ids for each radio. Try something like follows:

<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>

You may want to change the calculateBill() function with the following:

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;
}

Note the use of document.getElementsByName(), as Oded suggested in another answer.

You should also remove the id attribute from your radio buttions:

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

The following is a screenshot showing that the above function works fine with the 20% radio button:

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

The id of an element has to be unique, so you can't have two elements with the same id.

When you try to get all radio buttons as a single element, you will get one of them. Which one you get is entirely up to how the browser choose to handle the incorrect id's that you have set. You could get either of the elements, or null, depending on the implementation. In this case you happen to use a browser that gets the first element.

Give the elements their own 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" />

Getting the value attribute from the element will only get the value that you have specified for each of them. Instead you used the checked attribute:

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