Question

我有一些字段绑定到一个等式，并且随着字段的更新，列表元素中显示的内容。但是，只有当用户返回到该字段然后在模糊时更新内容时，才会对等式进行更新。有没有办法在检查无线电字段后立即更新内容？

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

Answer 1

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

updateTotal("4.36%");

在那个职能中......

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

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

 updateTotal(currentAPR);

Answer 2

您是否尝试过.change（）或.click（）？

Answer 3

试试这段代码！

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

Answer 4

有两件事可以帮到你：

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

这两件事将会帮助您解决您可能遇到的任何问题，因为对click事件采取行动可能会在change驱动的表单元素上获得意外结果。

<强>更新

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

并且，您不会在函数中的任何位置调用updateTotal函数来触发无线电选择的更改。如果将它添加到该逻辑的末尾，它应该触发您正在寻找的更新。

单击单选按钮时未更新的值

4 个答案: