seo Question posted in
Some basic information to get you started with this can be found here.

jquery update total based on checkboxes – SEO

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

Tags:

3

Answers


  1. 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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search