如何讀取JavaScript中單選按鈕的值？

-1

<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如何讀取JavaScript中單選按鈕的值？

來源

2010-03-13 Corey

歡迎來到SO。請提供一些你想做什麼，哪些不起作用，以及你已經嘗試過的東西的解釋。投票結束。 –

你介意寫下你的問題而不是粘貼整個HTML代碼嗎？ –

這就像讓你的母親髒盤子期待她爲你清理它。 –

在HTML中，ID都是唯一的。嘗試將id屬性更改爲tipPercent1，tipPercent2等。

來源

2010-03-13 17:34:41

這仍然不會讓他識別'checked'單選按鈕。 – Oded

@Oded：正確，當IE和Chrome崩潰並且我無法關閉它們時，我正在編輯我的帖子，不得不重新啓動，等我回來的時候，你已經把我想要的東西，所以我想我會離開它。 +1給你的答案。 –

兩個單選按鈕都具有相同的ID - 這在HTML中不正確，因爲ID應該是唯一的。結果是document.getElementById不能使用。

嘗試document.getElementsByName並遍歷結果數組以找出哪一個被檢查以及它的值是什麼。

所有的

來源

2010-03-13 17:36:06 Oded

+1用於提示'document.getElementsByName' –

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

首先，ID的需要是唯一標識符，因此給兩個要素相同的ID將會使問題。 document.getElementById("tipPercent")畢竟試圖獲得一個元素，那麼哪兩個不同輸入元素應該返回？

其次，你只能檢查一個無線電輸入是否被選中，所以你需要遍歷所有那些inpud字段，並檢查哪一個被檢查以獲得當前值。

來源

2010-03-13 17:36:54 poke

您有兩個相同的ID「tipPercent」。 getElementById只返回第一個結果

來源

2010-03-13 17:37:02 Artic

您應該爲每個無線電使用不同的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>

來源

2010-03-13 17:39:19 Neuquino

你可能想用下面的改變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。

你也應該從你的無線電buttions刪除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

來源

2010-03-13 17:41:41

元素的id必須是唯一的，所以不能有兩個具有相同id的元素。

當您嘗試將所有單選按鈕作爲單個元素時，您將獲得其中一個。你得到的是完全取決於瀏覽器如何選擇處理你設置的不正確的ID。您可以獲取任一元素，或者取決於實現情況爲空。在這種情況下，您碰巧使用獲取第一個元素的瀏覽器。

給這個元素自己的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;

來源

2010-03-13 17:42:29 Guffa

如何讀取JavaScript中單選按鈕的值？

回答

相關問題