firefox document.getElementById 只得到第一个复选框？答案

【问题标题】：firefox document.getElementById get just the first checkbox?firefox document.getElementById 只得到第一个复选框？
【发布时间】：2011-11-10 08:18:50
【问题描述】：

这个简单的代码检查是否至少有一个复选框被标记，
当我尝试使用 Firefox 获取复选框数组时，我没有——我只是第一个，
相同的代码在 IE 中运行良好，
我是否需要为复选框元素创建不同的 ID 并对其进行迭代？感谢您的帮助。

<html>
<head>  
<script type="text/javascript">

function testCheckBox(){

var vehicle = document.getElementById('vehicle');
 for (var i=0; i < vehicle.length; i++){                     

    alert(vehicle[i].checked); 
    if (trucks[i].checked){

         alert('at least one was selected');
     return true;
     }
    }

alert('Please select one');
return false;
    }
</script>

</head>
<body>

<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
<br />
<input type="button" name="test" value="test" onclick="testCheckBox();" />

</body>
</html>

【问题讨论】：

标签： javascript firefox checkbox

【解决方案1】：

getElementById() 从不返回数组。它只返回一个元素（因为 id 应该是唯一的 - 即拥有多个具有相同 id 的元素不是好的做法。） getElementsByTagName() 是你想要的：

var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
  var el = inputs[i];
  if (el.type == 'checkbox' && el.checked) {
    alert(el.value + ' is checked');
  }
}

（注意：较新的浏览器支持getElementsByClassName，也可以使用。

【讨论】：

【解决方案2】：

问题是您的 HTML 中没有具有该 ID 的 any 元素。这是一个语义问题。当您使用复选框时，我不认为 getElementById 是要走的路。您应该使用 class 属性或为这些复选框添加一个包含元素，然后遍历其子元素（复选框）。

【讨论】：

顺便说一句，如果那是您的实际 HTML sn-p，您的 <form> 标记至少缺少一个 action 属性并且它永远不会关闭。

【解决方案3】：

我不会指望浏览器允许 name 属性代替 ID。如果您为所有复选框分配一个唯一 ID，您可以使用一些条件检查来查看是否单独检查其中任何一个，例如：

function testCheckBox() {
    var bikeCB = document.getElementById('bikeCB');
    var carCB = document.getElementById('carCB');

    if(bikeCB.checked) {
        alert('An item is checked');
    }else if(carCB.checked) {
        alert('An item is checked');
    }else {                              //after all have been checked
        alert('No items are checked');
    }
}

虽然您需要为 HTML 中的每个复选框添加一个 ID：

<input type="checkbox" id="bikeCB" value="Bike" /> I have a bike<br />
<input type="checkbox" id="carCB" value="Car" /> I have a car

如果您打算循环检查复选框，您可以为您的表单提供一个 ID，并使用 form.elements[] 集合循环检查它们并测试是否有一个被选中：

function testCheckBox() {

    var form = document.getElementById('form1');    //get reference to form
    var length = form.elements.length;        //get length of form.elements array

    for(i=0; i<length; i++) {     //loop through while i is less than array length
        if(form.elements[i].checked) {
            alert('An item was checked');
        }
    }
}

这将为每个选中的复选框发出警报。如果您只想知道是否检查了任何一个，您可以将一个变量设置为 true（如果有任何检查），然后在 for 循环之后检查该变量是否为 true，以了解是否发出警报。
顺便说一句，您的 html 中 <input> 元素之后似乎缺少一个结束 </form> 标记。

【讨论】：

【解决方案4】：

你需要的是getElementsByName，而不是getElementById。

如果要按标签名称选择，则为getElementsByTagName。如果是您想要的类名，getElementsByClassName（仅限较新的浏览器）。你看？因此，请根据您的选择使用正确的方法。

【讨论】：