Question

我仍在学习JavaScript，需要更新我的脚本，以便在表单中记录多个项目。我在表单上使用此脚本来获取单选按钮的值，并将该值添加到＆＃39; Amount＆＃39;事件结帐表单上的字段。

$(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>

我希望底部的复选框在检查时将其值添加到总金额中。任何帮助将不胜感激。

Answer 1

在选中按钮时将值添加到总计中，然后在取消选中按钮时减去该值。这可以使用onchange事件或使用.change() jQuery方法完成。

＆＃13;

$(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");
    });
});

＆＃13;

<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>

＆＃13;

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);
});

demo

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);
});

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">

获取JavaScript表单的总量

4 个答案: