jquery question about small calcation when radio button is checked.

Question

jQuery

$(function() {

       var service1price = 1;
       var service2price = 2;

       $("#service1checked").one('click', function() {
                                    $('<div id="service1ok"> Service Number 1, ' + service2price + ' $ </div>').fadeIn().appendTo('.selecteditems');
           });

       $("#service2checked").one('click', function() {
                                    $('<div id="service2ok"> Service Number 2, ' + service1price + ' $ </div>').fadeIn().appendTo('.selecteditems');
           });


       $("#service1no").one('click', function() {
                                    $('#service1ok').fadeOut();
           });

       $("#service2no").one('click', function() {
                                    $('#service2ok').fadeOut();
           });

$("#service1checked").one('click',function() {
                                   $('<div id="service1okprice">' + service1price + '</div>').fadeIn().appendTo('.totalcost');
                                   });
$("#service2checked").one('click',function() {
                                   $('<div id="service2okprice">' + service2price + '</div>').fadeIn().appendTo('.totalcost');
                                   });
       });

HTML:

<div id="left">
<form>
<p>service 1</p><p class="red">Price 1 $</p>
Yes<input type="radio" name="service1" value="service1yes" id="service1checked" />
No<input type="radio" name="service1" value="service1no" id="service1no" />


<p>service 2</p><p class="red">Price 2 $</p>
Yes<input type="radio" name="service2" value="service2yes" id="service2checked" />
No<input type="radio" name="service2" value="service2no" id="service2no" />
<br />
<input type="submit">
</form><br />
</div>
<div id="center">

<div class="selecteditems">
Selected Items:
</div>

<div class="totalcost">
Total cost:
</div>

</div>

How i can sum up variables , when the radio button is checked and show this in total cost div, for example if 2 radio boxes are selected so there will be something like: Total cost : 3 $.

Answer 1

It would be easier if you made a general-purpose click handler than making a specific one for each click. Give all your radio button a class of "services" or something. Then do something like this:

var total = 0

$(".services").click( function() {
   recalc()
})

function recalc() {
    if($('#service1checked').checked) {
         $('<div id="service1ok"> Service Number 1, ' //....etc..
         total = total + 1    
    }

    // other conditions ...

    $('#totalcost').html(total)
}