Javascript將值添加到單選按鈕以輸入價格

我試圖在即時通訊工作的網頁內部創建一個JavaScript塊。自從高中我還沒有做javascript和它似乎沒有要回來給我:(Javascript將值添加到單選按鈕以輸入價格

在這個代碼塊我想有4套廣播按鈕，每一個選擇採摘時間，價格會inputed對每個無線電設備組的一個變量。即

var firstPrice = $25 
    var secondPrice = $56 
    var thirdPrice = $80 
    var fourthPrice = $90

則每個無線電設備組具有一個選擇之後會有附着在提交按鈕的功能，增加了構成每個價格以顯示隱藏字段內的最後量

var totalPrice = (firstPrice + secondPrice + thirdPrice + fourthPrice)

我的問題是，我如何將一個數值附加到一個組中的單選按鈕，同名，但id在每個組中都不相同。然後，我創建一個函數，將所有價格組合起來，然後將提交按鈕設置爲onClick = totalPrice（）; 下面是一組單選按鈕的例子：

 <label> 
      <input type="radio" name="model" value="radio" id="item_0" /> 
      item 1</label> 
     <br /> 
     <label> 
      <input type="radio" name="model" value="radio" id="item_1" /> 
      item2</label> 
     <br /> 
     <label> 
      <input type="radio" name="model" value="radio" id="item_2" /> 
      item3</label> 
     <br /> 
     <label> 
      <input type="radio" name="model" value="radio" id="item_3" /> 
      Item4</label> 
     <br /> 
     <label> 
      <input type="radio" name="model" value="radio" id="item_4" /> 
      item5</label> 

      </form>

然後我的腳本看起來像：

function finalPrice90{ 
var selectionFirst = document.modelGroup.value; 
var selectionSecond = document.secondGroup.value; 
var selectionThird = document.thirdGroup.value; 
var selectionFourth = document.fourthGroup.Value; 

var totalPrice = (selectionFirst + selectionSecond + selectionThird +   selectionFourth); 
     }

來源

2012-10-08 Marc

如果您使用的提交按鈕更新價格，那麼用戶將只能看到更新後的價格爲一秒鐘左右，直到頁面從提交刷新。您希望在按下提交之前更新價格（並確保您重新計算服務器的價格）。 – RobG

試試這個小提琴

來源

2012-10-08 04:02:21 Tariqulazam

設置你的無線輸入value屬性到每個單選按鈕應該代表的價格。

當它的時間來計算，只需通過每組迴路，並得到value屬性如果檢查到的電臺。

由於value屬性是一個數字的字符串表示形式，所以在執行任何數學操作（但是這是一個簡單的parseInt或parseFloat）之前，您需要將其轉換回數字。

下面是使用純JavaScript工作小提琴：http://jsfiddle.net/XxZwm/

如jQuery或原型（或MooTools的，script.aculo.us等）庫可以從長遠來看使這更容易，取決於有多少DOM操作你不想重新發明輪子的代碼。

來源

2012-10-08 04:20:03 pete

你的要求似乎很簡單，下面是應該回答大多數問題的例子。在表單上有一個單擊監聽器，所以無論何時單擊窗體控件，價格都會更新。

<script type="text/javascript"> 

//function updatePrice(el) { 
function updatePrice(event) { 
    var el = event.target || event.srcElement; 
    var form = el.form; 
    if (!form) return; 
    var control, controls = form.elements; 
    var totalPrice = 0; 
    var radios; 

    for (var i=0, iLen=controls.length; i<iLen; i++) { 
    control = controls[i]; 

    if ((control.type == 'radio' || control.type == 'checkbox') && control.checked) { 
     totalPrice += Number(control.value); 
    } 

    // Deal with other types of controls if necessary 
    } 
    form.totalPrice.value = '$' + totalPrice; 
} 

</script> 

<form> 
    <fieldset><legend>Model 1</legend> 
    <input type="radio" name="model1" value="25">$25<br> 
    <input type="radio" name="model1" value="35">$35<br> 
    <input type="radio" name="model1" value="45">$45<br> 
    <input type="radio" name="model1" value="55">$55<br> 
    </fieldset> 
    <fieldset><legend>Model 2</legend> 
    <input type="radio" name="model2" value="1">$1<br> 
    <input type="radio" name="model2" value="2">$2<br> 
    <input type="radio" name="model2" value="3">$3<br> 
    <input type="radio" name="model2" value="4">$4<br> 
    <fieldset><legend>Include shipping?</legend> 
     <span>$5</span><input type="checkbox" value="5" name="shipping"><br> 
    </fieldset> 

    <input name="totalPrice" readonly><br> 
    <input type="reset" value="Clear form"> 
</form>

你可以自動把單個收聽形式click事件並更新的價格，在這種情況下，你可以擺脫更新按鈕。

來源

2012-10-08 05:04:53 RobG

Javascript將值添加到單選按鈕以輸入價格

回答

相關問題