檢查複選框是否被選中並使用jquery添加它的值

Question

我想創建一個表單，我必須根據所選值計算值。我有三個複選框，這些複選框將作爲用戶選擇的選項給出，並在一個框中顯示總成本。我試圖通過以下邏輯來實現目標，但它根本不工作。

HTML：

<?php 
$add_ons = $wpdb->get_results("SELECT add_ons_id, add_ons_name, add_ons_price FROM add_ons;"); 
foreach($add_ons as $value){ 
?> 
     <div class="media"> 
      <div class="media-body"> 
        <div class="form-group"> 
         <div class="checkbox"> 
          <label style="font-weight: bold;"><input class="add-ons" type="checkbox" id="add-ons<?php echo $value->add_ons_id; ?>" data-price="<?php echo $value->add_ons_price; ?>" name="info_status"/><?php echo $value->add_ons_name; ?></label> 
         </div> <!-- end checkbox --> 
        </div> <!-- end form group --> 

       </div> 
       <div class="media-right" style="vertical-align: middle;"> 
        <span><?php echo '$'. $value->add_ons_price; ?> </span> 
       </div> 
     </div><!-- end media --> 
    <?php } ?> 

    <div class="media"> 
     <div class="media-body"> 
       Actual Price 
     </div> 
     <div class="media-right"> 
      <span class="price-calculated" style="text-decoration: line-through;">$0.00 </span> 
     </div> 
    </div> 

jQuery的

/* calculate the total */ 
    function getTotal(){   
     var $total = 0.00; 

     $checkbox = $('input[type="checkbox"]:checked'); 


     $checkbox.each(function(){ 
      $total += parseFloat($(this).attr('data-price')).toFixed(2); 
     }); 

     return $total; 
    } 

    function updateBOX(){ 
     $priceCalculated = $('.price-calculated'); 
     $calculatedPrice = $priceCalculated.html('$' + getTotal()); 

    } 

    updateBOX(); 
    $checkbox = $('input[type="checkbox"]'); 

    $checkbox.on('change', function(){ 
     updateBOX; 
    }); 

請告訴我什麼，我做錯了。

謝謝。

Answer 1

您沒有訪問數據的元素正確

$(this).data('price') 

錯字在選擇

$checkbox = $('input[type="checbox"]') should be checkbox 

缺少類？

<span class="price-calculated"><?php echo '$'. $value->add_ons_price; ?> </span> 

這將成爲一個全球性的：

$checkbox = $('input[type="checkbox"]'); 

這是會在你的函數調用改爲：

$checkbox = $('input[type="checkbox"]:checked'); 

停止做多餘的賦值。

$('input[type="checkbox"]').on('change', function(){ 
    updateBOX; <-- OP found the missing parens on their own! good job. 
}); 

function getTotal(){ 
    var $total = 0; 

    $('input[type="checkbox"]:checked').each(function(){ 
     $total += parseFloat($(this).data('price')).toFixed(2); 
    }); 

function updateBOX() { 
    $('.price-calculated').html('$' + getTotal()); 

toFixed返回一個字符串值：

$total += parseFloat($(this).data('price')).toFixed(2); 

而是使用：

$total += parseFloat($(this).data('price')); 
... 
return $total.toFixed(2);