суммировании цен, которые могут изменяться Radio Button

Question

Вот мой код: HTML

<div> 
    <p>Whatsit:<span class="price"></span></p> 
    <p>Whosit: <span class="whositprice"></span></p> 
    <p>Total Price: <span class="totalPrice"></span></p> 
</div> 
<div> 
    <h4>Select a whatsit</h4> 
    <input type="radio" name="whatsit" value="whatsit1" />Whatsit 1 - $10 
    <input type="radio" name="whatsit" value="whatsit2" />Whatsit 2 - $22 
<h4>Select a whosit</h4> 
    <input type="radio" name="whosit" value="whosit1" />Whosit 1 - $7 
    <input type="radio" name="whosit" value="whosit2" />Whosit 2 - $13 

JQuery

function updateWhatPrice(){ 
    var whatsitChoice = $("input[name='whatsit']:checked").val(); 
    if(whatsitChoice == "whatsit1"){ 
     $("span.price").text("$10"); 
    }else if(whatsitChoice =="whatsit2"){ 
     $("span.price").text("$22"); 
    } 
} 
$("input[name='whatsit']").click(function(){ 
    updateWhatPrice(); 
}); 
function updateWhoPrice(){ 
    var whositChoice = $("input[name='whosit']:checked").val(); 
    if(whositChoice == "whosit1"){ 
     $("span.whositprice").text("$7"); 
    }else if(whositChoice =="whosit2"){ 
     $("span.whositprice").text("$13"); 
    } 
} 
$("input[name='whosit']").click(function(){ 
    updateWhoPrice(); 
}); 

То, что я хочу сделать, это обновление пролет totalPrice на основе выбора из Радио-кнопки. Не уверен, где начать. Вот jsfiddle: http://jsfiddle.net/Djd3d/

Answer 1

Я бы предложите следующее, что требует незначительных изменений в вашем HTML:

$('input[type="radio"]').change(function(){ 
    var self = this, 
     price = self.nextSibling.nodeValue.match(/\$(\d+)/)[0]; 
    $('span.' + this.name + 'price').text(price); 
    $('span.totalPrice').text(function(){ 
     return (parseInt($('span.whatsitprice').text().replace(/\$/,''),10) || 0) + (parseInt($('span.whositprice').text().replace(/\$/,''), 10) || 0); 
    }); 
}); 

JS Fiddle demo.

Измененный HTML является сделать span класс наименований последовательно, следуя образец name радио input, плюс price строки.

---

Отредактировано к адресу question raised, в комментариях (ниже), с помощью OP:

Что делать, если один из вариантов имеет цену $ 0. Например. Whatsit 1 поставляется без каких-либо дополнительных затрат .... но вы хотите оставить это поле пустыми, а не $ 0 там ...

В случае так как нет никакого текста после input или нет не совпавших следующих номеров $ характер:

$('input[type="radio"]').change(function(){ 
    var self = this, 
     // caching the text of the nextSibling 
     next = self.nextSibling.nodeValue, 
     /* checking that there is a string of numbers following a $ character, 
      if there is we return that sequence of numbers to the variable, 
      if not we set the price to 0, to avoid NaN problems later. 
     */ 
     price = next.match(/\$(\d+)/) ? next.match(/\$(\d+)/)[0] : 0; 

    $('span.' + this.name + 'price').text(price); 
    $('span.totalPrice').text(function(){ 
     return (parseInt($('span.whatsitprice').text().replace(/\$/,''),10) || 0) + (parseInt($('span.whositprice').text().replace(/\$/,''), 10) || 0); 
    }); 
}); 

JS Fiddle demo.

Ссылки:

• change().
• JavaScript Regular Expressions.
• parseInt().
• String.match().
• String.replace().
• text().

Answer 2

Вы можете создать другую функцию, которая возвращает итоговое значение.

Демо: http://jsfiddle.net/Djd3d/1/

Я добавил 0 в качестве заполнителей внутри <spans> и создал следующий код:

function getTotal() { 
    return (parseInt($(".price").text().split("$")[1]) + parseInt($(".whositprice").text().split("$")[1])); 
} 

И добавил их к событиям изменения:

$("input[name='whosit']").click(function(){ 
    updateWhoPrice(); 
    $(".totalPrice").text("$" + getTotal()); 
}); 

$("input[name='whatsit']").click(function(){ 
    updateWhatPrice(); 
    $(".totalPrice").text("$" + getTotal()); 
});