如何根據單選按鈕的選擇更新整數值？

-1

這應該是一個相當簡單的問題，但我不知道如何解決這個問題，並沒有發現任何適當的答案，我想要做的事。如何根據單選按鈕的選擇更新整數值？

我有一些文字，簡單來說，有一個字符串和兩個單選按鈕的HTML文件。因此，像這樣：

<html> 
    <head> 
     <title>Some title</title> 
     <script src="jquery.js"></script> 
    </head> 
    <body> 

     <div id="main"> 
     <p> 10 GB </p> 
     </div> 

     <div class="radioButtons" style="width: 100%"> 
     <p><input type="radio" name="radioLessGB" value="Less" align="absmiddle"/> I want less gigabytes(-3GB) </p> 
      <p><input type="radio" name="radioMoreGB" value="More" align="absmiddle"/> I want more gigabytes (+5GB)</p> 
     </div> 
    </body> 
    </html>

我需要一種方法來更新取決於所選的單選按鈕文本（即「10 GB」）的值。特別是，當用戶選擇第一個單選按鈕時，上述字符串中的整數值應該立即減少3 （即「10GB」 - 3 =「7GB」），並且如果用戶選擇第二無線電按鈕，整數值應加5（即「10 GB」+ 5 =「15 GB」）。

要做到這一點，我想我要解析字符串「10 GB」，以獲得整數值，然後添加或取決於所選擇的單選按鈕減去。然後用結果更新字符串。我不希望用戶點擊某種「提交」按鈕，數字的更新應該「上即時」爲單選按鈕的用戶切換來實現的。

我認爲這可能與jQuery做，我只是不知道它的方式。有人可以幫助更簡單的解決方案的示例代碼？！？

謝謝！

來源

2013-01-24 djjupa

StackOverflow的總和的格式化值是不是這個問題的適當場所。我們不會爲您編寫代碼。你需要做自己的編碼，如果你不確定爲什麼某些東西不能按預期工作，請在代碼中加上一個解釋你期望它做什麼，以及它實際上在做什麼，包括所有的錯誤信息。看[ask advice]（http://stackoverflow.com/questions/ask-advice）。 –

首先查看['.change（）']（http://api.jquery.com/change/）處理程序。 – Blazemonger

解析字符串將不會真正起作用。如果你選擇「Less」，並且它從當前的10GB減去3GB，那麼你最終得到7GB，這很好。但是，如果您選擇「更多」，則再次解析字符串，它會將5 GB添加到7 GB，併爲您提供12 GB的結果 - 這是不正確的，假設它應該是15 GB，而不管先前選擇選項。當然，如果你按照相反順序選擇選項，你會得到同樣的問題：10 - > 15 - > 12. –

使用jQuery，你可以簡單地做如下。嘗試DEMO HERE

$("input").change(function() { 
    $("#main").text((10 + parseInt($(this).val())) + " GB"); 
});

如果你需要做這純JavaScript，請使用下，嘗試DEMO HERE

function valChanged(ele) { 
    document.getElementById('main1233').textContent = (10 + parseInt(ele.value)) + " GB"; 
}

來源

2013-01-24 14:12:41 Wolf

Hej狼，這正是我正在尋找！非常感謝你！通過示例開始學習jQuery的好方法。 – djjupa

歡迎.. :)你應該通過jQuery一次。這是一個非常好的圖書館... – Wolf

jQuery是完成這個相當簡單的任務的一個途徑。你會想隔離你的#main div。然後使用jQuery搶電流值，並與單選按鈕的onClick（或jQuery的做數學題：.click(function()我建議把輸入標籤內的無線電選項的值

退房：Simple math in jquery

來源

2013-01-24 14:15:32 dmayo

不要使用'onclick'作爲收音機和複選框輸入，而是使用'onchange'。您可以使用鍵盤而不是鼠標來更改單選按鈕或複選框的選中狀態 - 由於未發生點擊，「onclick」將無法識別該狀態。 –

好點@grist – dmayo

我不會給這裏的完整代碼的答覆，只是球幫助你一起。

不解析字符串來執行計算，只使用數字（或至少是一個數字串）把10的值在一個特殊的data-xxx屬性裏，你可以訪問這些數據稍後與$(el).data('xxx')：
```
<div id="main" data-value="10"> 
```
執行相同的<input>元件，以保持「Δ」值，例如-3和+5或使用它們各自的值與.val()。
如果單擊任何單選按鈕（使用.on('change', fn)檢測事件），您將添加任何增量值到#main中的值。
顯示使用.text(sum + ' GB')

來源

2013-01-24 14:21:41

爲了節省我把測試扔在一起，你知道如果jQuery會將'data-value'屬性看作一個整數或一個字符串嗎？ –

@AnthonyGrist這將是一個字符串，所以無論是強制還是強制轉換都需要與它進行數學運算。 –

@Jack感謝您的提示！這對我正在嘗試做的事很有價值！我想用parseInt（）也可以做數學，對嗎？！ – djjupa

如何根據單選按鈕的選擇更新整數值？

回答

相關問題