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返回String值：

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

改为使用：

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

检查是否选中了复选框并使用jquery添加其值

1 个答案: