動態添加單選按鈕值

Question

我試圖讓一個用戶選擇一個單選按鈕時一起添加的值的總數。目前它只是回到空白。下面是我到目前爲止有：

<script type="text/javascript"> 
function findTotal(){ 
var ntot = 0 
var a = document.getElementsByName('ur').val(); 
var b = document.getElementsByName('haem').val(); 
var c = document.getElementsByName('haew').val(); 
var d = document.getElementsByName('syb').val(); 
var e = document.getElementsByName('orm').val(); 

var tot= ntot + a + b + c + d + e; 

document.getElementById('total').value = tot; 
} 

</script> 

並有降低單選按鈕的數量，例如：

0 <input type="radio" name="ur" value="0" id="ur1" class="radi" onclick="findTotal()"/> <br /> 
2 <input type="radio" name="ur" value="2" id="ur2" class="radi" onclick="findTotal()"/> <br /> 

0 <input type="radio" name="haem" value="0" id="haem1" class="radi" onclick="findTotal()"/><br /> 
1 <input type="radio" name="haem" value="1" id="haem2" class="radi" onclick="findTotal()"/> <br /> 

0 <input type="radio" name="haew" value="0" id="haew1" class="radi" onclick="findTotal()"/><br /> 
1 <input type="radio" name="haew" value="1" id="haew2" class="radi" onclick="findTotal()" /> <br /> 

0 <input type="radio" name="syb" value="0" id="syb1" class="radi" onclick="findTotal()"/><br /> 
1 <input type="radio" name="syb" value="1" id="syb2" class="radi" onclick="findTotal()"/> <br /> 

0 <input type="radio" name="orm" value="0" id="orm1" class="radi" onclick="findTotal()"/><br /> 
1 <input type="radio" name="orm" value="1" id="orm2" class="radi" onclick="findTotal()"/> <br /> 

Total: <input type="text" name="total" id="total"/> 

任何幫助將非常感激。

Answer 1

getElementsByName()，如「元素」中的「s」所暗示的那樣，返回元素的列表。並且該列表沒有.val()方法或.value屬性，也沒有選擇僅檢查項目。

但這很容易與jQuery。刪除所有內聯onclick=處理程序，然後僅將click處理程序與基於公共類的jQuery綁定。

您可以使用:checked selector快速獲取選中的單選按鈕，然後使用.each() method循環查看。我使用unary plus operator將字符串值從value屬性轉換爲數字，以便它們可以添加在一起。

$(".radi").click(function() { 
 
    var total = 0; 
 
    $(".radi:checked").each(function() { total += +this.value; }); 
 
    $("#total").val(total); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
0 <input type="radio" name="ur" value="0" id="ur1" class="radi"/> <br /> 
 
2 <input type="radio" name="ur" value="2" id="ur2" class="radi"/> <br /> 
 

 
0 <input type="radio" name="haem" value="0" id="haem1" class="radi"/><br /> 
 
1 <input type="radio" name="haem" value="1" id="haem2" class="radi"/> <br /> 
 

 
0 <input type="radio" name="haew" value="0" id="haew1" class="radi"/><br /> 
 
1 <input type="radio" name="haew" value="1" id="haew2" class="radi" /> <br /> 
 

 
0 <input type="radio" name="syb" value="0" id="syb1" class="radi"/><br /> 
 
1 <input type="radio" name="syb" value="1" id="syb2" class="radi"/> <br /> 
 

 
0 <input type="radio" name="orm" value="0" id="orm1" class="radi"/><br /> 
 
1 <input type="radio" name="orm" value="1" id="orm2" class="radi" /> <br /> 
 

 
Total: <input type="text" name="total" id="total"/>

Answer 2

您可以使用：checked屬性獲取選中的單選按鈕。然後通過它們循環來添加值。

$(".radi").click(function() { 
    var total = 0; 
    $(".radi:checked").each(function() { 
    total += parseInt($(this).val()); 
    }) 
    $("#total").val(total); 
}); 

Fiddle

注：不是寫的內聯函數，你可以使用jQuery的事件綁定。

Answer 3

可能少了很多優雅的說是剛剛彈出，但是這顯示瞭如何轉換你的原始功能與讓每個單選按鈕輸入組的值的其他解決方案jQuery.val()方法。

<script type="text/javascript"> 
function findTotal(){ 
var ntot = 0 
var a = $("input:radio[name ='ur']:checked").val(); 
var b = $("input:radio[name ='haem']:checked").val(); 
var c = $("input:radio[name ='haew']:checked").val(); 
var d = $("input:radio[name ='syb']:checked").val(); 
var e = $("input:radio[name ='orm']:checked").val(); 

var tot= ntot + a + b + c + d + e; 

document.getElementById('total').value = tot; 
} 

</script>