jquery update total based on checkboxes

Question

I have a form where based on checkbox total value will be updated

Here is my form

<label class="checkbox">
        <input type="checkbox" class="check" value="23">SEO                             
    </label>
    <label class="checkbox">
        <input type="checkbox" class="check" value="34">XYZ 
    </label>                                
    <label class="checkbox">
            <input type="checkbox" class="check" value="45">Logo Design                                  
    </label>


    <span class="product-price" id="total" >45</span>

jQuery I have used

  $('input[type=checkbox]').change(function () {
        var val = parseFloat(this.value),
            totalVal = parseFloat($('#total').val());
        if (this.checked) {
            $('#total').val((totalVal + val).toFixed(2));
        } else {
            $('#total').val((totalVal - val).toFixed(2));
        }
    });

But nothing get updated.What could be the possible Error? Any solution please

Shubham Khatri · Accepted Answer · 2017-03-30 04:36:15Z

Span attribute doesn't have a val() property but text()

 

    $('input[type=checkbox]').change(function () {
            var val = parseFloat(this.value),
                totalVal = parseFloat($('#total').text());
            if (this.checked) {
                $('#total').text((totalVal + val).toFixed(2));
            } else {
                $('#total').text((totalVal - val).toFixed(2));
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox">
        <input type="checkbox" class="check" value="23">SEO                             
    </label>
    <label class="checkbox">
        <input type="checkbox" class="check" value="34">XYZ 
    </label>                                
    <label class="checkbox">
            <input type="checkbox" class="check" value="45">Logo Design                                  
    </label>


    <span class="product-price" id="total" >45</span>

Mayank Pandeyz · Accepted Answer · 2017-03-30 04:36:01Z

0

Change it:

if (this.checked) {
            $('#total').val((totalVal + val).toFixed(2));
        } else {
            $('#total').val((totalVal - val).toFixed(2));
        }

to

if (this.checked) {
            $('#total').text((totalVal + val).toFixed(2));
        } else {
            $('#total').text((totalVal - val).toFixed(2));
        }

as span do not have a value attribute, the text you see is the text attribute associated with that.

answered Mar 30, 2017 at 4:36

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Comments

prasanth · Accepted Answer · 2017-03-30 04:47:18Z

Simply do with Array#map function .simply add with checked values only on each time check or uncheck .no need subtraction for below method

$('input[type=checkbox]').change(function() {
var tot=0;
$('input:checked').map(function(a){
 tot += parseInt($(this).val()) 
})
  $('#total').val(tot.toFixed(2));
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<label class="checkbox">
        <input type="checkbox" class="check" value="23">SEO                             
    </label>
<label class="checkbox">
        <input type="checkbox" class="check" value="34">XYZ 
    </label>
<label class="checkbox">
            <input type="checkbox" class="check" value="45">Logo Design                                  
    </label>
    <input id="total">

Collectives™ on Stack Overflow

jquery update total based on checkboxes

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related