Question

我正在构建一些小部件，允许用户选择单选按钮和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));
}

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

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

1 个答案: