0

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>

4

2 回答 2

1

问题出在你写的时候

if (aCheckbox.checked)

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

if ( aCheckbox && aCheckbox.checked)

jsFiddle 可以帮助你

http://jsfiddle.net/NNgFu/

于 2013-09-29T12:49:47.750 回答
-1

代替

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/

于 2013-09-29T12:39:33.457 回答