用jQuery计算复选框总数

如何解决用jQuery计算复选框总数

| 我正在尝试根据从复选框中选择的选项来创建页面总数。 这是我的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>

    

解决方法

        如果可以一起选择所有复选框，那将是最简单的方式（并确保您没有抓取不想抓取的其他复选框：

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

    ,        您的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 = \'\';
    }
});

看这里的小提琴