Bind radio selection to variable to use in equation

Question

I have a radio group that I am using to select between different options and change what is being presented to the user:

$(document).ready(function () {
 $("input[name='status']").click(function() {
        console.log("changed");
       if ($("input[name='status']:checked").val() == '36')
           $(".output2").html("4.36%" + "<span class=\"expandedTermsText\"> APR<\/span>");
       if ($("input[name='status']:checked").val() == '48')
            $(".output2").html("4.74%" + "<span class=\"expandedTermsText\"> APR<\/span>");
         if ($("input[name='status']:checked").val() == '60')
            $(".output2").html("4.94%" + "<span class=\"expandedTermsText\"> APR<\/span>");
        else if ($("input[name='status']:checked").val() == '72')
            $(".output2").html("5.30%" + "<span class=\"expandedTermsText\"> APR<\/span>");
    });
});

And I have another function that I am using to display the result from equation but have the choice of APR set as a hard coded value:

$(document).ready(function () {
$(function () {
    $("body").on("blur", "#vehiclePrice,#estimatedTaxesAndFees,#downPayment,#manufacturerRebate,#tradeInValue,#amtOwedOnTrade,#extendedWarranty,#gapInsurance,#serviceContract", function () {
        updateTotal();
    });
    var updateTotal = function () {
        var input1 = parseInt($('#vehiclePrice').val()) || 0;
        var input2 = parseInt($('#estimatedTaxesAndFees').val()) || 0;
        var input3 = parseInt($('#downPayment').val()) || 0;
        var input4 = parseInt($('#manufacturerRebate').val()) || 0;
        var input5 = parseInt($('#tradeInValue').val()) || 0;
        var input6 = parseInt($('#amtOwedOnTrade').val()) || 0;
        var input7 = parseInt($('#extendedWarranty').val()) || 0;
        var input8 = parseInt($('#gapInsurance').val()) || 0;
        var input9 = parseInt($('#serviceContract').val()) || 0;       
        var sum=input1 + input2 - input3 - input4 - input5 + input6 + input7 + input8 + input9;

         $('.total').text('$'+sum.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
 var principle = parseInt($('#vehiclePrice').val()) || 0;
 var apr = .0530;
 var months = 72;
 var perMonth = sum*(apr/12)/(1-Math.pow((1+(apr/12)),-months)).toFixed(2);              
        $('.perMonth').text('$'+perMonth.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
    };
    var output_total = $('#total');
});

});

What I need is to have these two variable: var apr = .0530; var months = 72;

Bound to the radio changes which are represented with clicks since I am displaying the radio choices as buttons.

I have the fiddle here:

Fiddle

The clicks aren't working in the fiddle but they are working on my local... I'm just trying to figure out a way to make the formula dynamic so that when I click the radios it will update the var apr = .0530; var months = 72; accordingly.

Any help would be appreciated.

Answer 1

if i missunderstand you, then sorry!

you can bind these values as attriutes to your radios like:

<input type="radio" value="...." name="status" apr="0.0530" months="72"/> 
...etc

then you get it using $("input[name='status']:checked").attr("apr").....

UPDATE as per your comment, i would do it then this way:

var updateTotal = function () {
    ....       
    var apr = $("input[name='status']:checked").attr("apr");
    var months = $("input[name='status']:checked").attr("months");
    ....
};