Javascript函数无法访问document.getElementById选中的复选框的值

Question

Javascript is not my strong point and I'm trying to write a simple function to count how many checkboxes are selected by the user. These checkboxes are generated from values stored a database and represent a choice of toppings available for a customer ordering pizza.

Javascript:

<script type="text/javascript">
function countBoxes()
{
var aCounter = 0;
var count = 0;
while (count < 10){
    var aString = 'topping' + count;
    var aCheckbox = document.getElementById(aString);
        if (aCheckbox.checked)
        {
            aCounter++;
        }
    count++;
}
alert(aCounter + 'boxes have been ticked');
}
</script>

PHP:

echo "<table>";
while($row = mysql_fetch_assoc($product))
{ 
echo "<tr><td>".$row['topping_name']."</td><td>".price($row[$aString])."</td><td>      <input type=\"checkbox\" id=\"topping".$counter."\" name=\"topping".$counter."\" value=\"".$row['topping_name']."\" onclick=\"countBoxes()\"\" ></td></tr>";         
$counter + 1;
}
echo "</table>";

For some reason the 'checked' state of the check box is not being picked up? Does anyone know why this is?

Generated HTML

<table><tr><td>Pepperoni</td><td>0.00</td><td><input type="checkbox" id="topping"       name="topping" value="Pepperoni" onclick="countBoxes()"" ></td></tr><tr><td>Ham</td>       <td>0.00</td><td><input type="checkbox" id="topping" name="topping" value="Ham" onclick="countBoxes()"" ></td></tr><tr><td>Sausage</td><td>0.00</td><td><input type="checkbox" id="topping" name="topping" value="Sausage" onclick="countBoxes()"" ></td></tr><tr><td>Red Onions</td><td>0.00</td><td><input type="checkbox" id="topping" name="topping" value="Red Onions" onclick="countBoxes()"" ></td></tr></td></tr></table>

Answer 1

The problem it's when you write

if (aCheckbox.checked)

because if your aCheckbox = null, you have an error on aCheckbox.checked

if ( aCheckbox && aCheckbox.checked)

the jsFiddle can help you

http://jsfiddle.net/NNgFu/

Answer 2

replace

onclick="countBoxes();"

by

onchange="countBoxes();" 

and change the javascript function by

function countBoxes()
{
  var aCounter = 0;
  var count = 0;
  var element = null;
while (element = document.getElementById('topping' + count)){
    if (element.checked)
      aCounter++;
    count++;
}
alert(aCounter + 'boxes have been ticked');
}

Fiddle: http://jsbin.com/oWAcegE/2/