获取JavaScript表单的总金额

Question

我仍在学习JavaScript，需要帮助更新我的脚本以计算表单中的多个项目。我在表单上使用此脚本来获取单选按钮的值，并将该值添加到事件结账表单中的“金额”字段。

$(function(){
    $('.ticketAmount').click(function() {
        $('#Amount').val(this.value);
    });
});

现在，我有一个新表单，除了购票选择外还有几个选项。现在，客户选择门票并勾选一些复选框以添加私人游览和各种商品。

以下是我的HTML代码：

<div>
    <input type="radio" name="da" value="150" class="ticketAmount" />
    <strong>Regular Ticket $150.00</strong>
</div>
<div>
    <input type="radio" name="da" value="250" class="ticketAmount" />
    <strong>Couples Ticket $250.00</strong>
</div>
  <div>
    <input type="radio" name="da" value="1500" class="ticketAmount" />
    <strong>Table (Seats 10 Individuals) 1500.00</strong>
</div>
<div>
    <input type="checkbox" name="da" value="50" class="ticketAddition" >
    <strong>Private Tour $50.00</strong>
</div>
<div>
    <input type="checkbox" name="da" value="25" class="ticketAddition" >
    <strong>Meet the Chef $25.00</strong>
</div>

我希望当底部的复选框被选中时，它们的值能够加到总金额中。非常感谢您的帮助。

- Drew Elias

---

Amount是什么类型的元素？ - Markai

http://jsfiddle.net/1gxqdo7v/ - urbz

@urbz 我想你的意思是：http://jsfiddle.net/1gxqdo7v/1/ 在JS中小心处理字符串/整数的+ :P - Siguza

你是否在寻找类似这个的东西：http://jsfiddle.net/oa97u9o6/? - Markai

Answer 1

当勾选按钮时，将值添加到总数中，取消勾选时从总数中减去该值。可以使用onchange事件或.change() jQuery方法来实现。请保留HTML标签。

$(function(){
    //ticketAmount for radio buttons, ticketAddition for checkboxes
    var ticketAmount = 0, ticketAddition = 0;
    $(".ticketAmount").change(function() {
        //Set ticketAmount to the value of the button checked.
        var value = parseInt(this.value);
        ticketAmount = value;
        $('#amount').text((ticketAmount+ticketAddition)+".00");
    });
    $(".ticketAddition").change(function() {
        //Add or subtract the value of the button from ticketAddition
        //depending on whether or not the button has been checked or unchecked.
        var value = parseInt(this.value);
        if (this.checked) ticketAddition += value;
        else ticketAddition -= value;
        $('#amount').text((ticketAmount+ticketAddition)+".00");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type="radio" name="da" value="150" class="ticketAmount" />
    <strong>Regular Ticket $150.00</strong>
</div>
<div>
    <input type="radio" name="da" value="250" class="ticketAmount" />
    <strong>Couples Ticket $250.00</strong>
</div>
  <div>
    <input type="radio" name="da" value="1500" class="ticketAmount" />
    <strong>Table (Seats 10 Individuals) 1500.00</strong>
</div>
<div>
    <input type="checkbox" name="da" value="50" class="ticketAddition" >
    <strong>Private Tour $50.00</strong>
</div>
<div>
    <input type="checkbox" name="da" value="25" class="ticketAddition" >
    <strong>Meet the Chef $25.00</strong>
</div>
<div><strong>Total : $<span id="amount">0.00</span></strong></div>

- Noble Mushtak

Answer 2

var sum = 0;
$('.ticketAddition').change(function () {

    if ($(this).prop('checked') == true) {
        sum = sum + parseInt($(this).val());
    }
    else{
        sum = sum - parseInt($(this).val());
    }
    alert(sum);
});  

演示

- ozil

Answer 3

试一下这个

<div>
    <input type="radio" name="da" value="150" class="ticketAmount" />
    <strong>Regular Ticket $150.00</strong>
</div>
<div>
    <input type="radio" name="da" value="250" class="ticketAmount" />
    <strong>Couples Ticket $250.00</strong>
</div>
  <div>
    <input type="radio" name="da" value="1500" class="ticketAmount" />
    <strong>Table (Seats 10 Individuals) 1500.00</strong>
</div>
<div>
    <input type="checkbox" name="da1" value="50" class="ticketAddition" >
    <strong>Private Tour $50.00</strong>
</div>
<div>
    <input type="checkbox" name="da1" value="25" class="ticketAddition" >
    <strong>Meet the Chef $25.00</strong>
</div>


$('.ticketAmount,.ticketAddition').click(function () {
    var total = parseInt($('input[name=da]:checked').val());
    $('input[name=da1]:checked').each(function () {
        total += parseInt($(this).val());
    });
    alert(total);
});

- Aravind Sivam

Answer 4

这是我做的方式，我认为这是最简单的解决方案

由于这些是货币，我使用了浮点数并将金额修剪为两位小数。

https://jsfiddle.net/ysx66yvr/

$(function(){
    $('.ticketAmount,#privateTour,#meetTheChef').click(function() {
        CalculateAmount();
    });

    function CalculateAmount()
    {
        var ticketPrice = parseFloat($('.ticketAmount:checked').val());
        var otherPrices = 0.0;
        if($("#meetTheChef").is(':checked'))
            otherPrices = parseFloat($("#meetTheChef").val());
        if($("#privateTour").is(':checked'))
            otherPrices = otherPrices + parseFloat($("#privateTour").val());
        $('#Amount').val((ticketPrice + otherPrices).toFixed(2));
    }
});

HTML是

<div>
    <input type="radio" name="da" value="150" class="ticketAmount" />
    <strong>Regular Ticket $150.00</strong>
</div>
<div>
    <input type="radio" name="da" value="250" class="ticketAmount" />
    <strong>Couples Ticket $250.00</strong>
</div>
  <div>
    <input type="radio" name="da" value="1500" class="ticketAmount" />
    <strong>Table (Seats 10 Individuals) 1500.00</strong>
</div>
<div>
    <input type="checkbox" id="privateTour" value="50" class="ticketAddition" >
    <strong>Private Tour $50.00</strong>
</div>
<div>
    <input type="checkbox" id="meetTheChef" value="25" class="ticketAddition" >
    <strong>Meet the Chef $25.00</strong>
</div>
    <input type="text" id="Amount">

- pjobs