Question

这个简单的代码检查是否有至少一个标记的复选框，
当我尝试使用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>

Answer 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，也可以使用。

Answer 2

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

Answer 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循环之后检查变量是否为真以知道是否提醒。
顺便说一句，您似乎在</form>元素之后的html中缺少结束<input>标记。

Answer 4

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

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

firefox document.getElementById只获取第一个复选框？

4 个答案: