检查复选框是否被选中并使用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);