Question

I have radiobuttons like below:

Apple
<input type="radio" id="one" name="apple" data-price="10" value="light"/> Light
<input type="radio" id="two" name="apple" data-price="20" value="dark" /> Dark
<input type="text" id="appleqty" name="appleqty" value="" />

Mango
<input type="radio" id="three" name="Mango" data-price="30" value="light"/> Light
<input type="radio" id="one" name="Mango" data-price="40" value="dark" /> Dark
<input type="text" id="Mangoqty" name="Mangoqty" value="" />

Pine Apple
<input type="radio" id="four" name="Pineapple" data-price="50" value="light"/> Light
<input type="radio" id="five" name="Pineapple" data-price="60" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />

Grape
<input type="radio" id="six" name="Grape" data-price="70" value="light"/> Light
<input type="radio" id="seven" name="Grape" data-price="80" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />
​

The radiobuttons are separated in a Group as (Apple,Mango,Pineapple,Grape).
I need to add the Price with the Quantity he needs.

Example:

If a user clicked Dark Apple in the radiobutton with 1 Qty the Price should be 20 and if the user changed the clicked Radio to the Light Apple radiobutton then the price should be 10 - 20(Previous Price If Checked) = 10 .
Is this possible using JavaScript?

My code that I have tried:

function upprice(ref)
{
    var elname = ref.getAttribute("name");
    var qtyname = elname+"qty";
    var price = ref.getAttribute("proprice");
    var qty = parseInt(document.getElementById(qtyname).value)
    var newprice = parseInt(price*qty);
    var olprice = parseInt(document.getElementById("orderpagepriceinstant").innerHTML);
    var totalprice = parseInt(olprice+newprice);
    document.getElementById("orderpagepriceinstant").innerHTML = parseInt(totalprice)
}

Answer 1

Here’s a quick jQuery example: http://jsfiddle.net/FTscC/

(laptop dying, I’ll elaborate when I can tomorrow!)