javascript - 使用 jQuery 计算复选框总数

Question

我正在尝试根据从复选框中选择的选项创建页面总计。

这是我的 HTML 标记:

<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 />

这是我的 JavaScript，不起作用:

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

我是不是哪里出错了？我还有其他总计在工作，已从脚本中删除，以便更容易阅读，只是这个不起作用!

编辑:

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

添加 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

如果您可以一起选择所有复选框(并确保您没有捕获其他您不想捕获的复选框:

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

然后选择所有这些，并迭代它们，对它们的值求和:

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