两个 jquery 脚本来汇总表单输入答案

【问题标题】：Two jquery scripts to sum form input两个 jquery 脚本来汇总表单输入
【发布时间】：2015-11-17 18:34:23
【问题描述】：

我正在构建一些允许用户选择单选按钮的小部件，然后 jquery 会计算应付款总额。目前，由于 jquery 计算在同一页面上，因此它们变得混乱。我尝试更改#ids 等，但它仍然无法正常工作。这是我目前所拥有的：

小部件 1

<script type="text/javascript">
jQuery(document).ready(function($) {
    function recalculate() {
        var sum = 0;

        $("input[type=radio]:checked").each(function() {
            sum += parseInt($(this).attr("value"));
        });

        $("#output").html(sum.toFixed(2));
    }

    $("input[type=radio]").change(function() {
        recalculate();
        $('#invoice_description').val($(this).attr('rel'));
    });
});
</script>

我的表单示例

<div class="form-row">
    <div class="form-row-title"><input type="radio" class="checkbox" name="register" value="<?php echo $vendor; ?>" checked /></div>
    <div class="form-row-label">Vendor Registration (Up To 3 Attendees:  $<?php echo $vendor; ?>)</div>
    <div class="clear"></div>
</div>

<div class="form-row">
    <div class="form-row-title" style="color: #090; font-weight: 700;">Total Due:</div>
    <div class="form-row-content" style="padding: 10px 0;"><b><span id="output">0.00</span></b></div>
    <div class="clear"></div>
</div>

小部件 2

<script type="text/javascript">
jQuery(document).ready(function($) {
    function recalculate() {
        var sum = 0;

        $(".dues input[type=radio]:checked").each(function() {
            sum += parseInt($(this).attr("value"));
        });

        $("#output2").html(sum.toFixed(2));
    }

    $(".dues input[type=radio]").change(function() {
        recalculate();
        $('#dues_description').val($(this).attr('rel'));
    });
});
</script>

小部件 2 表单示例

<div class="form-row">
    <div class="form-row-title">
    <input type="radio" id="general" class="dues" name="membership" value="<?php echo $general; ?>" rel="General Society Membership" />
    </div>
    <div class="form-row-label">General Society Membership ($<?php echo $general; ?>) <i id="general-tip" class="fa fa-question-circle fa-1x"></i></div>
    <div class="clear"></div>
</div>

<div class="form-row">
    <div class="form-row-title" style="color: #090; font-weight: 700;">Total Due:</div>
    <div class="form-row-content" style="padding: 10px 0;"><b><span id="output2">0.00</span></b></div>
    <div class="clear"></div>
</div>

【问题讨论】：

widget1 是否会干扰 widget2 而不是相反？我很好奇，因为 widget2 有一个更具体的输入选择器，而 widget1 会查找所有已检查的无线电输入。因此，在页面上，widget1 将查看任何选中的无线电输入，而 widget2 将仅查找在.dues 中选中的无线电。此外，widget1 将监听器附加到屏幕上的所有收音机。
为避免混淆，这实际上不是jQuery widget 的示例，并且由于sum 变量的范围，您会遇到此问题。如果您遵循一些小部件示例，您将不会遇到此问题 :) 并将它们应用于您的情况
没有说我在制作一个 jquery 小部件，这是一个使用一些 jquery 的 wordpress 管理小部件。总和仅在第一个小部件中总计，但第二个小部件添加到第一个小部件总计中。如果这是有道理的。我只是尝试向小部件 1 添加更具体的输入选择器，但没有运气。

标签： jquery sum conflict

【解决方案1】：

好吧，终于弄明白了。这有点棘手，因为我还有其他脚本也在运行，但这对我有用。

function recalculate() {
    var sum = 0;

    $(".mtg:checked").each(function () {
        sum += parseInt($(this).attr("value"));
    });

    $("#output").html(sum.toFixed(2));
}

我将侦听器更改为输入类而不是输入类型。这样我就可以设置不同的类而不会发生冲突。

【讨论】：