Jquery帶有輸入框和單選按鈕的總價格

我有以下簡單的Jquery代碼，需要輸入數字*價格來提供總計。Jquery帶有輸入框和單選按鈕的總價格

我還需要它包含單選按鈕的選項，如果選中+添加到總數。

任何人都可以幫助我，這樣我就可以添加單選按鈕選項，使其通過輸入+單選按鈕來獲得總價格？

**如果價格是活的，當你輸入/收音機檢查而不是點擊提交，但不必。

我有這個至今： http://jsfiddle.net/4bitlabs/tpkpd/15/

HTML：

<p class="list">How many "Linear Feet" of boards do you have?</p> 
<input id="amount" /> 
<div class="addon">Add Paint $10.00<input id="amount" type="radio"value="10.00" class="radio"/></div> 
<div class="price">$<label for="amount">0.00</label></div>

JQuery的：

$(function() { 
$('#amount').change(function() { 
    var $this = $(this); 

    $('label').text((parseFloat($this.val()) * 20.00).toFixed(2))    
});   
});

在此先感謝。

來源

2014-02-19 AlwaysLearning

'Id's必須是唯一的！使用'class'而不是'Id'或者只是'$（'input [type =「text」]'）' – Pavlo

嘗試過，它可以讓收音機工作，但不是輸入。它只在一次輸入時進行計算，而不是將它們組合在一起。謝謝。 – AlwaysLearning

因爲你沒有任何'radiobutton'事件 – Pavlo

您的HTML存在一些問題。 ID應該是唯一的。

我做了一個相當重要的重寫，我認爲它會做你正在尋找的東西。還有其他的方法，但它應該讓你開始

<input id="amount1" class="amount" />

我已經使ID是唯一的，並給予輸入框一個類。

<input id="amount2" type="radio" value="10.00" class="radio addOn" data-for="amount1" />

單選按鈕也有一類「addOn」，通過「data-for」標籤附加到標籤上。

$(function() { 
    $('.amount').change(function() { 
     changeAmount($(this)); 
    }); 

    $('.addOn').change(function() { 
     var $original = $('#' + $(this).data('for')); 
     changeAmount($original); 
    }); 
});

有通過經由與一個類的addOn改變無線電按鈕與類的amount，一個改變輸入框來改變量，一個有兩種方式。唯一的區別是單選按鈕功能找出它與哪個輸入框相關聯。

function changeAmount($element) { 
    var amount = 0; 
    amount = parseFloat($element.val()) * 20; 
    // this handles the case when the val is not filled in. 
    if (isNaN(amount)) { 
     amount = 0; 
    } 
    var id = $element.attr('id'); 
    $('.radio:checked[data-for="' + id + '"]').each(function() { 
     amount += parseFloat($(this).val()); 
    }); 
    $('label[for=' + id + ']').text(amount.toFixed(2)) 
}

jsFiddle

來源

2014-02-19 15:38:34

謝謝。那是我需要的。這裏是小提琴：http://jsfiddle.net/4bitlabs/62vWH/ – AlwaysLearning

任何方式使它，使您在輸入框中鍵入時，它顯示在總數，而不必點擊？ – AlwaysLearning

您將使用keypress事件而不是.amount函數的更改事件 –

使用checked屬性。而你最好不要使用重複的ID。

$(function() { 
    $('#amount').change(function() { 
    var $this = $(this); 
    var addPoint = $('input[type="radio"]').prop('checked') ? 10 : 0; 

    $('label').text((parseFloat($this.val()) * 20.00 + addPoint).toFixed(2))    
    });   
});

來源

2014-02-19 15:41:07 dongseok0

Jquery帶有輸入框和單選按鈕的總價格

回答

相關問題