计算复选框使用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> 

添加的无线：

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

然后全部选中，并在它们之间迭代，总结自己的VALU ES：

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

Answer 2

。在你的HTML错误：

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

然后，当你做parseInt函数它总是更好的指定基你解析：

parseInt(option1, '10') 

否则你可能有像09值奇怪的问题。

我可以看到生成的HTML输出？也许其中一个复选框的值不是数字，也不能被解析。 解析它会返回NaN，当您将这些值相加时，这会给您带来问题。

我用这个代码和作品，但当然也可以在小提琴写更好

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

看here