用Javascript读取CheckBox数组的值的代码(兼容IE与firefox)

为了同时支持Firefox和IE，我们常常用document.getElementById(id)方法来取得HTML对象。但是getElementById方法只能取得单个对象，而对于CheckBox数组则无能为力。 在JavaScript中，处理HTML元素，特别是像CheckBox这样的复选框数组，可能会因浏览器之间的差异而变得复杂。在本文中，我们将探讨如何使用JavaScript兼容IE和Firefox来读取CheckBox数组的值。 `document.getElementById(id)` 是一个常用的方法，它通过指定的ID查找单一的HTML元素。然而，当涉及到数组或集合，如CheckBoxes，这个方法就不适用了，因为它只能返回一个元素。 相反，`document.getElementsByName(name)` 方法是更合适的选择，它可以返回一组具有相同name属性的元素，这通常用于处理多选按钮（CheckBoxes）或radio按钮。在我们的例子中，所有的CheckBox都共享同一个"name"属性，即"role"，这样我们可以通过这个名称来获取整个CheckBox数组。 下面是一个示例代码： ```javascript function test() { // 获取所有name为"role"的元素，即CheckBox数组 var elements = document.getElementsByName("role"); var str = ""; // 存储已选中的CheckBox值 // 遍历数组，检查每个CheckBox是否被选中 for (var i = 0; i < elements.length; i++) { if (elements[i].checked) { // 如果CheckBox被选中 str += "> " + elements[i].value + "\n"; // 添加其值到str } } // 输出结果 if (str === "") { alert("您没有选择任何角色！"); } else { alert("您选择的角色为：\n\n" + str); } } ``` 在这个函数中，我们首先通过 `getElementsByName("role")` 获取所有名为"role"的CheckBox。然后，我们遍历这个数组，检查每个元素的 `checked` 属性，如果为真，表示该CheckBox已被选中，我们将其 `value` 属性添加到字符串 `str` 中。我们根据 `str` 是否为空来决定是否提示用户未选择任何角色，或者显示已选择的角色列表。 这段代码在IE和Firefox等现代浏览器中都是兼容的，因为它使用的是DOM标准方法，而不是特定于某个浏览器的特性。确保在编写JavaScript代码时考虑到跨浏览器兼容性是至关重要的，这样可以确保你的应用在各种环境下都能正常工作。 总结来说，处理CheckBox数组时，应该使用 `document.getElementsByName()` 方法，而不是 `document.getElementById()`。在遍历数组并检查每个元素的状态时，要关注 `checked` 属性，以便获取用户的选定选项。同时，确保编写兼容不同浏览器的代码，以提高用户体验。