Question

Javascript不是我的强项，我正在尝试编写一个简单的函数来计算用户选择了多少个复选框。这些复选框是根据存储在数据库中的值生成的，表示客户订购披萨时可以选择的浇头。

使用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>";

由于某些原因，未选中复选框的“已检查”状态？有谁知道这是为什么？

生成的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

你写的问题

if (aCheckbox.checked)

因为如果你的aCheckbox = null，你在aCheckbox.checked上有错误

if ( aCheckbox && aCheckbox.checked)

jsFiddle可以帮助你

http://jsfiddle.net/NNgFu/

Answer 2

替换

onclick="countBoxes();"

通过

onchange="countBoxes();"

并通过

更改javascript函数

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

小提琴：http://jsbin.com/oWAcegE/2/

Javascript函数没有通过document.getElementById访问复选框选中的值

2 个答案: