单击单选按钮时值未更新 [英] Values not updating when radio button is clicked

问题描述

我有一些字段绑定到方程式，并且随着字段的更新，列表元素中的显示内容.但是，仅当用户返回该字段，然后在模糊时更新内容时，才对方程进行更新.一旦选中了无线电字段，是否有办法使此内容更新?

I have some fields bound to an equation and as the fields are updated, the displayed content within the list element. However, the update to the equation is only happening if the user goes back into the field and then the content is updated on blur. Is there a way to make this content update as soon as the radio field is checked?

HTML:

<ul class="fltrt">
    <li class="brand brand-blue perMonth">$461/mo</li>
    <li>Estimated Payment<span class="glyphicon glyphicon-cloud"></span></li>
</ul>

<div id="edit-status" class="form-radios">
    <div class="form-item form-type-radio form-item-status">
        <input type="radio" id="edit-status-0" name="status" value="36" apr="0.0436" months="36" class="form-radio radioCursor"/>
        <label class="option unchecked" for="edit-status-0">36 mos</label>
    </div>
    <div class="form-item form-type-radio form-item-status">
        <input type="radio" id="edit-status-1" name="status" value="48" apr="0.0474" months="48" class="form-radio radioCursor"/>
        <label class="option unchecked" for="edit-status-1">48 mos</label>
    </div>
    <div class="form-item form-type-radio form-item-status">
        <input type="radio" id="edit-status-2" name="status" value="60" apr="0.0494" months="60" class="form-radio radioCursor"/>
        <label class="option unchecked" for="edit-status-2">60 mos</label>
    </div>
    <div class="form-item form-type-radio form-item-status">
        <input type="radio" id="edit-status-3" name="status" value="72" apr="0.0530" months="72" checked="checked" class="form-radio radioCursor"/>
        <label class="option checked" for="edit-status-3">72 mos</label>
    </div>

jQuery:

$(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(input1 + input2 + input3 + input4 + input5 + input6 + input7 + input8 + input9);

            $('.total').text('$'+sum.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));

            var principle = parseInt($('#vehiclePrice').val()) || 0;
            var apr = $("input[name='status']:checked").attr("apr");
            var months = $("input[name='status']:checked").attr("months");
            var perMonth = sum*(apr/12)/(1-Math.pow((1+(apr/12)),-months)).toFixed(2);              

            $('.perMonth').text('$'+perMonth.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
        };

        var output_total = $('#total');
    });
});

单选按钮的JQ:

$(document).ready(function () {
    $('label.option').click(function() {
        $('.form-item input[type=radio]').attr('checked',null);
        $('label.option').removeClass("checked").addClass("unchecked");
        $(this).prev().attr('checked',"checked");
        $(this).addClass("checked").removeClass("unchecked");
    });

    $("input[name='status']").click(function() {
        console.log("changed");

        if ($("input[name='status']:checked").val() == '36')
            $(".output2").html("4.36%" + "<span class=\"expandedTermsText\"> APR<\/span>");
        else if ($("input[name='status']:checked").val() == '48')
            $(".output2").html("4.74%" + "<span class=\"expandedTermsText\"> APR<\/span>");
        else 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>");
    });
});

小提琴显示了一切工作的方式(应该确保在车价框中至少输入1000)，并且如果您选择其他月份，它将更新.但是仅当您选择另一个单选按钮，然后将焦点集中在输入上然后进行焦点对准时.单击收音机时，我需要更改它. 工作小提琴

The fiddle shows how that everything is working as it should (just be sure to put at least 1000 in the vehicle price box) and it will update if you choose a different month. But only if you choose another radio button, and then focus in an input and then focusout. I need it to change when the radio is clicked. Working Fiddle

推荐答案

我为您制作了一个JSFiddle，它清理了一些JavaScript.您可以在此处看到它.重要的是，在APR点击时调用updateTotal()脚本，传递APR值并保留该值.

I made a JSFiddle for you that cleans up some of the javascript. You can see it here. The big thing is calling your updateTotal() script on the APR clicks, passing in the APR value, and retaining that.

updateTotal("4.36%");

在该功能中……

 updateTotal = function (apr) {
    currentAPR = apr;
    $(".output2").html(apr + "<span class=\"expandedTermsText\"> APR<\/span>");

在您的模糊事件中，由于我们保留了currentAPR变量中的最后一个APR，因此我们只在更新时发送它:

And in your blur event, since we're retaining the last APR in the currentAPR variable, we just send it in on update:

 updateTotal(currentAPR);

这篇关于单击单选按钮时值未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！