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>

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

如果您可以同时选中所有复选框，那将是最简单的（并确保您没有抓住其他您不想抓住的复选框：

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

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

使用jQuery计算复选框总计

2 个答案: