Question

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>

Answer 1

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