两个 jquery 脚本对表单输入求和

Question

我正在构建一些允许用户 select 单选按钮和 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>

Answer 1

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

function recalculate() {
    var sum = 0;

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

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

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

两个 jquery 脚本对表单输入求和

Two jquery scripts to sum form input

jquery

sum

conflict