check if checkbox is checked and add its value using jquery

Question

I am trying to create a form where I have to calculate values on the basis of values selected. I have three checkboxes which will be given as a choice to user to select and I am showing the total cost in a box. I am trying to achieve the goal through the following logic but its not working at all.

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;
    });

Kindly, tell me what I am doing wrong here.

Thank you.

"Kindly, tell me what I am doing wrong here" - You're using PHP. — Steve
– Steve, Commented Apr 5, 2017 at 15:46
$checkbox = $('input[type="checbox"]') Is the actual code or a typo you entered when asking your question? — Chris Caviness
– Chris Caviness, Commented Apr 5, 2017 at 16:01

Chris Caviness · Accepted Answer · 2017-04-05 17:10:49Z

1

You aren't accessing the data on the element properly

$(this).data('price')

Typo in selector

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

Missing class?

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

This is going to become a global:

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

Which is going to be changed in your function call to:

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

stop doing superfluous assignments.

$('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 returns as a String value:

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

Instead use:

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

edited Apr 5, 2017 at 17:10

answered Apr 5, 2017 at 15:57

Chris Caviness

5963 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Aisha Badar Over a year ago

I tried your solution but still its not updating the box.

Chris Caviness Over a year ago

I showed you the two errors in your code. You don't provide full code, i.e. where is the element with class="price-calculated" that you are trying to update in the code you provided with your question?

Chris Caviness Over a year ago

What is the purpose of doing this assignment? $calculatedPrice = $priceCalculated.html('$' + getTotal());

Aisha Badar Over a year ago

Oh yes, I am sorry. No, its another span. Let me add this in the question.

Aisha Badar Over a year ago

I have edited the question. The purpose of assignment is to show the total Price.

|

Collectives™ on Stack Overflow

check if checkbox is checked and add its value using jquery

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related