2014-08-28 54 views
0

我有多組單選按鈕,每組的選定值需要添加並顯示給用戶。到目前爲止,我一直在switch語句中更改函數中的值以處理添加。如何使用參數而不是值獲取單選按鈕組的總數

<form name="config" id="config"> 
<div class="row-fluid"> 
    <h3>Memory</h3> 
    <input type="radio" name="section1" value="4gb" onclick="changePrice(0)" checked>4gb<br> 
    <input type="radio" name="section1" value="8gb" onclick="changePrice(100)">8gb (+$100)<br> 
    <input type="radio" name="section1" value="16gb" onclick="changePrice(200)">16gb (+$200) 
</div> 
<div class="row-fluid"> 
    <h3>Primary Hard Drive</h3> 
    <input type="radio" name="section2" value="dell" onclick="changePrice(0)" checked>Dell<br> 
    <input type="radio" name="section2" value="asus" onclick="changePrice(100)">Asus(+$100) 
</div> 
</form> 
<div id="price"></div> 

我使用的是現在的劇本是

var displayPrice = document.getElementById("price"); 
var baseNum = 200; 
displayPrice.innerHTML = baseNum; 

function(changePrice){ 
    var val1, val2; 
    switch(document.config.section1.value){ 
     case "4gb": 
      val1 = 0; 
      break; 
     case "8gb": 
      val1 = 100; 
      break; 
     case "16gb": 
      val1 = 200; 
      break; 
     default: 
      val1 = 0; 
    } 
    switch(document.config.section2.value){ 
     case "dell": 
      val1 = 0; 
      break; 
     case "asus": 
      val1 = 100; 
      break; 
     default: 
      val1 = 0; 
    } 
    var sum = val1 + val2 + baseNum; 
    displayPrice.innerHTML = sum; 
} 

有沒有一種方法可以讓我做使用通過changePrice功能(所以我沒有改變的值傳遞的參數這些計算在switch語句中)?

+0

可能重複[?如何獲得jQuery中使用其名稱所選擇的單選按鈕的值] (http://stackoverflow.com/questions/986120/how-to-get-the-value-of-a-selected-radio-button-using-its-name-in-jquery) – Interrobang 2014-08-28 22:17:13

+0

您可以訪問其他屬性一個單選按鈕,不僅僅是它的價值。你可能會發現'data-'屬性在這裏很有幫助。 – Interrobang 2014-08-28 22:18:12

+0

'function(changePrice){'可能沒有做你打算做的事情。該語句聲明瞭一個具有單個參數的匿名函數「changePrice」,並將其拋出,處於無效的上下文中。 – amphetamachine 2014-08-28 22:18:38

回答

0

這裏是如何做到這一點沒有jQuery的。

你需要告訴changePrice函數部分,應該改變的價格,所以你需要將呼叫更改爲changePrice(1, 100),其中1是該部分,100是價格變動。然後,你可以單獨收集所有的部分價格,總結他們像這樣:

var displayPrice = document.getElementById("price"); 
var baseNum = 200; 
displayPrice.innerHTML = baseNum; 
var sections = {}; 

function changePrice(section,val){ 
    // add or update the section value 
    sections[section] = val; 
    // start with the base price 
    var sum = baseNum; 
    // loop over all the sections and add them to the base price 
    for(var key in sections) { 
     sum = sections[key] + sum; 
    } 
    displayPrice.innerHTML = sum; 
} 

Here's a jsfiddle

0

如果您將函數定義更改爲以下內容,它將採用參數。

function changePrice(val1) 

如果你可以改變你對每個輸入字段包含您的增量值的價值屬性,它會使你的計算和更容易的過程。 (這可能不適合你正在試圖解決這個問題。

與jQuery

var sum = $("input[name=section1]").val() + $("input[name=section2]").val(); 

,基本解決方案如果您的列表很長,你可以使用jQuery

遍歷您的單選按鈕組
var sum = 0; 
$("input[type=radio]").each(function(){sum += $(this).val();}); 
0
<html> 
<head> 
<script type="text/javascript"> 
     function DisplayPrice(price){ 
      var val1 = 0; 
      for(i = 0; i < document.form1.R1.length; i++){ 
       if(document.form1.R1[i].checked == true){ 
        val1 = document.form1.R1[i].value; 
       } 
      } 

      var val2 = 0; 
      for(i = 0; i < document.form2.R2.length; i++){ 
       if(document.form2.R2[i].checked == true){ 
        val2 = document.form2.R2[i].value; 
       } 
      } 

      var sum=parseInt(val1) + parseInt(val2); 
      document.getElementById('totalSum').innerHTML=sum; 
     } 
    </script> 
</head> 
<body> 
    Choose a number:<br> 
    <form name="form1" id="form1"> 
     <br> 
     R1&nbsp;<input id="rdo_1" type="radio" value="5" name="R1" onClick="DisplayPrice(this.value);" checked>5 
     <br> 
     R1&nbsp;<input id="rdo_2" type="radio" value="10" name="R1" onClick="DisplayPrice(this.value);">10 
     <br> 
    </form> 

    Choose another number:<br> 
    <form name="form2" id="form2"> 
     <br> 
     R2&nbsp;<input id="rdo_1" type="radio" value="15" name="R2" onClick="DisplayPrice(this.value);" checked>15 
     <br> 
     R2&nbsp;<input id="rdo_2" type="radio" value="20" name="R2" onClick="DisplayPrice(this.value);">20 
     <br> 
    </form> 
    Your total is Rs = <span name="totalSum" id="totalSum" > 20</span> 


</body> 
</html> 
相關問題