单击单选按钮时值不更新答案

【问题标题】：Values not updating when radio button is clicked单击单选按钮时值不更新
【发布时间】：2014-01-25 02:43:58
【问题描述】：

我有一些字段绑定到一个方程式，并且随着字段的更新，列表元素中显示的内容。然而，等式的更新只有在用户回到现场并且内容在模糊时更新时才会发生。有没有办法在选中单选字段后立即更新此内容？

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），如果您选择不同的月份，它将更新。但前提是您选择另一个单选按钮，然后聚焦输入然后聚焦。单击收音机时，我需要更改它。 Working Fiddle

【问题讨论】：

标签： javascript jquery html radio-button

【解决方案1】：

我为你制作了一个 JSFiddle 来清理一些 javascript。你可以看到它here。最重要的是在 APR 单击时调用您的 updateTotal() 脚本，传入 APR 值并保留它。

updateTotal("4.36%");

在那个函数中...

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

在你的模糊事件中，由于我们将最后一个 APR 保留在 currentAPR 变量中，我们只需在更新时将其发送：

 updateTotal(currentAPR);

【讨论】：

效果很好。我想我应该问是否有办法让按钮更新，如果没有发生任何变化，但我认为我只需要另一个 else if 语句来重新使用起始值。谢谢马修。
其实比我想象的要容易。只需将 value="" 作为起始值即可。

【解决方案2】：

您尝试过 .change() 或 .click() 吗？

【讨论】：

对不起，忘记发布按钮管理更改的 jq 功能，但它在小提琴中。所以我在点击时对收音机进行了更改，然后更新了 updateTotal(); 中的变量；功能。我尝试添加 updateTotal();到 if 或 else if 语句，但它显示错误。也许我将它们错误地添加到匿名函数中，或者我需要在 updateTotal(); 中调用匿名函数；功能。或者也许一个开关/案例会在点击时发生。不确定。

【解决方案3】：

试试这个代码！

 $("input[name='status']").change(function() {
        updateTotal();
    });

【讨论】：

这有点用。它会在输入任何内容之前第一次工作，但随后失败。如果我重新关注任何输入，它就会再次起作用。也许我需要将它绑定到总值而不是实际函数本身。
发布它抛出的错误，或者你所说的“它失败”是什么意思？

【解决方案4】：

这里有两件事可以帮助你：

您无需将任何操作绑定到<label> 标记。由于您已使用 for 属性将它们链接到输入，因此单击标签将触发要检查的选项，就像您选择了选项本身一样。
您希望将操作绑定到 change 事件，而不是 click 事件。单选组虽然有多个选项，但单选组作为一个整体，确实是一个输入。您只想在此输入的值发生更改时才执行操作，因此请使用该事件。

这两件事会让您在解决您可能遇到的任何问题方面走得更远，因为对click 事件采取行动可能会在change 驱动的表单元素上为您带来意想不到的结果。

更新：

刚刚注意到别的东西。 . .在您最初的$("body").on("blur", . . . 中，您可能也应该参加change 事件。 . .再次，这将有所帮助，因为它只会在输入的值更改时更新，并且不会在每次有人通过字段选项卡时触发。

而且，您永远不会在您的函数中的任何地方调用您的 updateTotal 函数，因为该函数会因收音机选择的变化而触发。如果您将其添加到该逻辑的末尾，它应该会触发您正在寻找的更新。

【讨论】：