添加已檢查的單選按鈕總數

Question

UPDATE

如果您嘗試在此鏈接上的表格http://jsfiddle.net/Matt_KP/BwmzQ/小提琴並選擇右上方的40英鎊單選按鈕，然后在底部看到訂單總額為40英鎊。 然后，如果您選擇75英鎊，訂單總額將變為75英鎊，但如果您再次返回並再次檢查40英鎊，則訂單總額為75英鎊+ 40英鎊，而選中的單選按鈕應為40英鎊。

更新結束

我有一個帶有單選按鈕的部分，如果選擇了其他按鈕，則只能檢查某些單選按鈕。 因此，如果用戶選擇了一個單選按鈕但隨后選擇了另一個，則第一個單選按鈕將被取消選中，因為它們不能同時選擇這兩個單選按鈕。

此外，我在名為data-price的單選按鈕中使用自定義屬性，該屬性保存每個需要添加的單選按鈕的值。

問題是當用戶選擇一個單選按鈕時，總顯示正常，但如果用戶選擇了另一個不能選擇前一個單選按鈕的單選按鈕，它會將總數添加到前一個單選按鈕上，它應該只添加單選按鈕。檢查。 這有點像緩存我認為的總數。

這就是我使用的總計已檢查的單選按鈕：

<script type="text/javascript">
jQuery(document).ready(function($){
$('input:radio').change(function(){
var total = 0.0;
$('input:radio:checked').each(function(){
      total += parseFloat($(this).data('price'));
});
$('#total').val(total.toFixed(2));
});

})
</script>

Answer 1

我認為你的大多數問題都可以用一些新的HTML來規避....

你瘋狂的 jQuery代碼限制輸入是荒謬的..你有名字，價值和你的數據價格屬性...按項目拆分每個收音機對我來說似乎有點矯枉過正..

這是一個有限的例子（根據我們在聊天中的討論）。

http://jsfiddle.net/CZpnD/ < - 這是你可以使用的例子..

要看的主要內容是我如何為每個“塊”選項使用相同的無線電名稱，以及如何在更改單個選項以獲得新總數時循環所有選項（不是最有效但是有效）。

而對於皮特的愛用標簽！

Answer 2

構建HTML是為了做到這一點。

<form name="myform">
    <input type="radio" name="foo" value="10" /> foo 
    <input type="radio" name="foo" value="30" /> bar 
</form>

如果給單選按鈕指定相同的名稱，則只能選擇一個。

當你獲得無線電元素時， .value屬性表示當前檢查的單選按鈕的值

var myform = document.forms.myform;

var radio = myform.elements.foo;
var price = radio.value;

請注意， radio是RadioNodeList ，僅由elements[name]返回

例

然而事實證明，對RadioNodeList的瀏覽器支持是適用的，所以你必須手動完成。 或者使用RadioNodeList polyfill

for (var i = 0, len = radio.length; i < len; i++) {
    var el = radio[i];
    if (el.checked) {
        var price = el.value;
        break;
    }
}