3

如何添加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("");
    });
});
4

4 回答 4

3

看看这个小提琴..这样你就可以有一些想法..它做了我认为你所要求的..

javascript

$("input:checkbox").change(function(){
  var $val=$(this).val();
  var total=$('#total').html();
  if($(this).is(':checked')){
    var finaltotal=parseInt($val) + parseInt(total)
  }else{
    var finaltotal=parseInt(total) - $val 
  }

      $('#total').html(finaltotal);
})

http://jsfiddle.net/5Azzr/1/

更新

用你的例子..

http://jsfiddle.net/BA5rX/4/

注意：我创建了一个包含总值的 div ......

<div id="total">1000</div>

最新更新

http://jsfiddle.net/5YZp5/2/

于 2012-12-19T12:25:45.333 回答
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/

于 2012-12-19T12:52:28.953 回答
0

这是我根据您的 html 提出的建议 - 我修复了您的无效 ID 并添加了一个类。此外，我还会计算 onload 以防页面重新加载并且复选框未清除。我从表格单元格中取出值减去前导磅字符

演示

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(); 
    });
});​
于 2012-12-19T12:32:52.450 回答
0

如果您可以修改您的 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));
});

示例小提琴

于 2012-12-19T12:35:26.393 回答