Question

大家好，我的复选框有点问题。

首先，我有7个复选框

Php：

  <span class="mobile-only">Cantitate:</span>
            <input type="hidden" name="extra_ids[]" value="1" />
            <input type="checkbox" class="add" data-amount="100" name="extra_units[1]" id="extra_units_1" value="1" />
        </div>
        <div class="col1 extra-name" style="font-size: 18px;">
            GPS                <span class="mobile-only">Total:</span>
            <span title="100" style="cursor:pointer">
               <b> 10 EURO / Zi </B>
            </span>
        </div>
     </div>
        <div class="extra">
        <div class="col5 extra-select">
            <span class="mobile-only">Cantitate:</span>
            <input type="hidden" name="extra_ids[]" value="6" />
            <input type="checkbox" class="add" data-amount="40" name="extra_units[6]" id="extra_units_6" value="1" />
        </div>
        <div class="col1 extra-name" style="font-size: 18px;">
            Internet WiFi in masina                <span class="mobile-only">Total:</span>
            <span title="40" style="cursor:pointer">
               <b> 4 EURO / Zi </B>
            </span>
        </div>
     </div>
        <div class="extra">
        <div class="col5 extra-select">
            <span class="mobile-only">Cantitate:</span>
            <input type="hidden" name="extra_ids[]" value="8" />
            <input type="checkbox" class="add" data-amount="10" name="extra_units[8]" id="extra_units_8" value="1" />
        </div>
        <div class="col1 extra-name" style="font-size: 18px;">
            Pre-Pay Spălare Auto                <span class="mobile-only">Total:</span>
            <span title="10" style="cursor:pointer">
               <b> 1 EURO / Zi </B>
            </span>
        </div>
     </div>
        <div class="extra">
        <div class="col5 extra-select">
            <span class="mobile-only">Cantitate:</span>
            <input type="hidden" name="extra_ids[]" value="4" />
            <input type="checkbox" class="add" data-amount="50" name="extra_units[4]" id="extra_units_4" value="1" />
        </div>
        <div class="col1 extra-name" style="font-size: 18px;">
            Scaun copil                <span class="mobile-only">Total:</span>
            <span title="50" style="cursor:pointer">
               <b> 5 EURO / Zi </B>
            </span>
        </div>
     </div>
        <div class="extra">
        <div class="col5 extra-select">
            <span class="mobile-only">Cantitate:</span>
            <input type="hidden" name="extra_ids[]" value="5" />
            <input type="checkbox" class="add" data-amount="200" name="extra_units[5]" id="extra_units_5" value="1" />
        </div>
        <div class="col1 extra-name" style="font-size: 18px;">
            Sofer adiţional                <span class="mobile-only">Total:</span>
            <span title="200" style="cursor:pointer">
               <b> 20 EURO / Zi </B>
            </span>
        </div>
     </div>
        <div class="extra">
        <div class="col5 extra-select">
            <span class="mobile-only">Cantitate:</span>
            <input type="hidden" name="extra_ids[]" value="7" />
            <input type="checkbox" class="add" data-amount="20" name="extra_units[7]" id="extra_units_7" value="1" />
        </div>
        <div class="col1 extra-name" style="font-size: 18px;">
            Tableta PC Touchscreen                <span class="mobile-only">Total:</span>
            <span title="20" style="cursor:pointer">
               <b> 2 EURO / Zi </B>
            </span>
        </div>
     </div>

jQuery的：

$('.add').click(function() {
    if($(this).is(':checked')) {
     $('#total').text(parseInt($('#total').text()) + parseInt($(this).data('amount')));
    } else {
     $('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount')));
    }
});

我不想添加带有值（由我指定）的隐藏复选框以及添加到现有值中的所选项目的总和。（我指定的值）

有人可以帮助我吗？

Answer 1

您可以设置一个隐藏的复选框，初始值设置为您想要的金额。

<div style="visibility: hidden;"> <input type="checkbox" class="add" data-amount="100" name="total" id="total" value="100" /> </div>

然后脚本将是：

    <script>
    $('.add').click(function() {
        var total = parseInt($('#total').val());
        if($(this).is(':checked')) {
         //$('#total').text(parseInt($('#total').text()) + parseInt($(this).data('amount')));
         $('#total').val(total + parseInt($(this).data('amount') ) ) ;
        } else {
         //$('#total').text(parseInt($('#total').text()) - parseInt($(this).data('amount')));
         $('#total').val(total - parseInt($(this).data('amount') ) ) ;
        }            
        console.log("total = " + $('#total').val() );

    });
    </script>

jQuery checbox问题将复选框添加到总计

1 个答案: