jQuery checbox問題添加複選框選中總數

大家好我有一個複選框的小問題。jQuery checbox問題添加複選框選中總數

首先，我有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'))); 
    } 
});

我wan't添加一個隱藏的複選框用一個值（由我指定）並將所選項目的總和添加到現有值。（由我指定的值）

有人能幫助我嗎？

來源

2017-05-20 Cosmin Gherasim

通過隱藏複選框，什麼你的意思是要麼複選框或隱藏在HTML –

隱藏複選框必須已選中，和隱藏和的總和複選框從他的值開始 –

現在總和是從0開始的，我想從指定值開始 –

您可以隱藏一個複選框，並將初始值設置爲您想要的數量。

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

來源

2017-05-20 11:27:02

jQuery checbox問題添加複選框選中總數

回答

相關問題