Inputs have data - let's use it

Use .data() to display information tied to a selected radio button.

by Erik Woods

HTML

<label for="term-option-a">
    <input
        data-count-monthly-payment1="100.00"
        data-count-apr1="1.19"
        id="term-option-a"
        name="term-option"
        type="radio"
    /> A Years
</label>
<label for="term-option-b">
    <input
        data-count-monthly-payment1="200.00"
        data-count-apr1="2.19"
        id="term-option-b"
        name="term-option"
        type="radio"
    /> B Years
</label>

<div>Monthly Payment: $<span data-number="countMonthlyPayment1"></span></div>
<div>APR: <span data-number="countApr1"></span></div>

<!-- ignore this bit -->
<footer>
    <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
</footer>

SCSS

label {
    display: block;
}


/* IGNORE THIS BIT YO */
footer {
    background: #ff0;
    border: 0 none;
    border-top: 1px solid #000;
    bottom: 0;
    color: #000;
    padding: 10px;
    position: fixed;
    width: 100%;
}

footer p {
    margin: 0;
}

JavaScript

$('[name="term-option"]').on('change', function () {
    var data = $(this).filter(':checked').data();

	$.each(data, function (k) {
        $('[data-number="' + k + '"]').html(data[k]);
    });
});