Question

如何从给定代码中添加190 + 150的费用并在另一个div上显示，总比分为div？

我已经创建了一个变量并存储了相应的成本，我的目标是当用户选中复选框时（我有大约10个复选框），相应的价格会被添加到总数中，当取消选中时它会自动减去。任何人都可以给我一个关于如何去做的提示。

$(document).ready(function() {
    //var pdf=$('#result').html(" -PDF Document");

    $('#1').click(function() {
        //var row = $(this);
        if (($(this).attr('checked')) == 'checked')
            $('#result').append("-PDF Document <html><span style=float:right>$190</span></html>");
        else
            $('#result').text("");
    });

    $('#2').click(function(){
        if (($(this).attr('checked')) == 'checked')
            $('#result2').append("-Video <html><span style=float:right>$150</span></html> ");
        else
            $('#result2').text("");
    });
});

Answer 1

使用以下代码：

JS：

function refreshPrices() {
    var currentTotalValue = 0;
    $("#results div").each(function() {
        if (!isNaN(parseInt($(this).find("span").text().substring(1)))) {
            currentTotalValue += parseInt($(this).find("span").text().substring(1));
        }
    });
    $("#totalValue").text("$" + currentTotalValue)
}

要使用它，将所有“result*”容器存储在容器中，这将使输出更容易使用jQuery进行迭代[因为只需要一个主要选择器（"#results"）来抓取所有“result*”容器中的结果。

<div id="results">
<div id="result">
</div>
<div id="result2">
</div>
</div>

每当用户与复选框进行互动时，都应调用refreshPrices()。

HTML：

<table>
<tr>
                        <td style="width: 13px">
                            <input id="1" type="checkbox" name="" onClick="" />

                        </td>
                        <td>
                            <h4>PDF Document</h4>
                            <p>
                                Already have your own menu or flyer? Include it in your App
                            </p>
                        </td>
                        <td class="cost" id="pdf-cost">£99.99 per document</td>
                    </tr>

                    <tr>
                        <td style="width: 13px">
                            <input id="2" type="checkbox"/>
                        </td>
                        <td>
                            <h4>Video</h4>
                            <p>
                                If you've already got videos on your website, these can be included within your App too.
                            </p>
                        </td>
                        <td class="cost">£149.99 per video</td>
</tr>
<table>
<br>
<br>
<div id="totalValu">Total Value: <span id="totalValue">$0</span></div>
<div id="results">
<div id="result">
</div>
<div id="result2">
</div>
</div>

JS：

$(document).ready(function() {

    $('#1').click(function() {
        //var row = $(this);
        if (($(this).attr('checked')) == 'checked') {
            $('#result').append("-PDF Document <html><span style=float:right>$190</span></html>");
        }
        else {
            $('#result').text("");
        }
        refreshPrices();
    });

    $('#2').click(function() {
        if (($(this).attr('checked')) == 'checked') {
            $('#result2').append("-Video <html><span style=float:right>$150</span></html> ");
        }
        else {
            $('#result2').text("");
        }
        refreshPrices()
    });
});

JSFiddle：http://jsfiddle.net/BA5rX/7/

Answer 2

以下是基于您的HTML的建议 - 我修复了您的无效ID并添加了一个类。我也会计算onload，以防重新加载页面并且不清除复选框。我从表格单元格中减去前导字符值

DEMO

function calcTotal() {
  var total = 0;
  $(".check:checked").each(function() {
    total += parseFloat($(this).parent().siblings(".cost").text().substring(1));
  });            
  $("#totalDiv").html("£"+total.toFixed(2))

}

$(function() {
    calcTotal(); 
    $(".check").on("click",function() {
       calcTotal(); 
    });
});

Answer 3

如果您可以修改HTML，以便为每个class和checkbox参数添加data-price，其中包含价格，您可以使jQuery非常简单：

$(".checkbox").change(function() {
    var total = 0;
    $(".checkbox:checked").each(function() {
        total += parseFloat($(this).data('price'));
    });
    $("#total").html(total.toFixed(2));
});

Example fiddle

添加复选框

3 个答案: