CODEWITHSUNDEEP
javascriptjquery
Lunar
Lunar

Reputation: 4711

Calculating checkbox totals with jQuery

I am trying to create a page total based on options selected from checkboxes.

here is my HTML markup:

<input type="checkbox" id="option1" name="option1" value="<?= $add[0] ?>" />t1 + &pound;<?= $add[0] ?><br />
<input type="checkbox" id="option2" name="option2" value="<?= $add[1] ?>" /t2 + &pound;<?= $add[1] ?><br />
<input type="checkbox" id="option3" name="option3" value="<?= $add[2] ?>" />t3 + &pound;<?= $add[2] ?><br />
<input type="checkbox" id="option4" name="option4" value="<?= $add[3] ?>" />t4 + &pound;<?= $add[3] ?> <br />

This is my JavaScript that doesn't work:

var option1 = 0;
var option2 = 0;
var option3 = 0;
var option4 = 0;
var op = 0;

var extra = document.getElementById('extra');

$(":input").change(function()
{

    option1 = $("input[name=option1]:checked").attr("value");
    option2 = $("input[name=option2]:checked").attr("value");
    option3 = $("input[name=option3]:checked").attr("value");
    option4 = $("input[name=option4]:checked").attr("value");

    op = parseInt(option1) + parseInt(option2) + parseInt(option3) + parseInt(option4) ;

    extra.innerHTML = '<p>&pound;'+op+'</p>';
});

Have I gone wrong somewhere? I have other totals working, have removed from script so it's easier to read, just this one doesn't work!

EDITED:

<input id="option1" name="option1" value="20" type="checkbox">t1 + £20<br>
<input id="option2" name="option2" value="20" type="checkbox">t2 + £20<br>
<input id="option3" name="option3" value="20" type="checkbox">t3 + £20<br>
<input id="option4" name="option4" value="20" type="checkbox">t4 + £20 <br>

ADDED RADIO:

    <input id="delivery" name="delivery" value="0" checked="checked" type="radio"> Standard (72hrs) - no addtional charges<br>
                    <input id="delivery" name="delivery" value="200" type="radio"> 45hrs - £200 per email templates<br>
                    <input id="delivery" name="delivery" value="250" type="radio"> 24hrs - £250 per email templates<br>

Upvotes: 0

Views: 899

Answers (2)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

There is an error in your html: 

<input type="checkbox" id="option2" name="option2" value="<?= $add[1] ?>" />t2 + &pound;<?= $add[1] ?><br />

Then when you do parseInt it's always better to specify the base you are parsing: 

parseInt(option1, '10')

Otherwise you might have odd problems with values like 09.

Can I see the generated HTML output? Maybe one of the values of the checkboxes is not a number and can't be parsed. Parsing it returns NaN and this gives you a problem when you add up the values.

I used this code and works but of course could be written much better

var extra = document.getElementById('extra');

$(":input").change(function()
{
     var option1;
var option2;
var option3;
    var option4;
    var op = 0;
    option1 = $("input[name=option1]:checked").attr("value");
    option2 = $("input[name=option2]:checked").attr("value");
    option3 = $("input[name=option3]:checked").attr("value");
    option4 = $("input[name=option4]:checked").attr("value");

    if (option1){
        op += parseInt(option1, '10');
    }
    if (option2){
        op += parseInt(option2, '10');
    }
    if (option3){
        op += parseInt(option3, '10');
    }
    if (option4){
        op += parseInt(option4, '10');
    }  
    if (op > 0){
        extra.innerHTML = '<p>&pound;'+op+'</p>';
    }else{
        extra.innerHTML = '';
    }
});

Look at the fiddle here

Upvotes: 0

kinakuta
kinakuta

Reputation: 9037

It would be easiest if you could select all your checkboxes together (and be sure you're not grabbing other checkboxes you don't want to grab:

<div id="checkSet">
  <input type="checkbox" id="option1" name="option1" value="<?= $add[0] ?>" />t1 + &pound;<?= $add[0] ?><br />
  <input type="checkbox" id="option2" name="option2" value="<?= $add[1] ?>" /t2 + &pound;<?= $add[1] ?><br />
  <input type="checkbox" id="option3" name="option3" value="<?= $add[2] ?>" />t3 + &pound;<?= $add[2] ?><br />
  <input type="checkbox" id="option4" name="option4" value="<?= $add[3] ?>" />t4 + &pound;<?= $add[3] ?> <br />
</div>

then select all of them, and iterate over them, summing their values:

var sum = 0;
$('#checkSet :checked').each(function(){
  sum += parseInt($(this).val(), '10');
});

Upvotes: 3

Related Questions