选择所有在 IE8 中不起作用的输入

Question

我在此页面上有一个全选按钮，该按钮适用于其他浏览器，但不适用于 IE8，除了查看我的源代码之外，任何人都可以看到问题吗？

更新：

这是我的代码：

<td valign="middle" align="center"><input type="checkbox" name="products-quote[]" value="<?php echo $product_option['id']; ?>" /></td>
<td valign="middle" align="center"><input type="checkbox" name="products-sample[]" value="<?php echo $product_option['id']; ?>" /></td>

<script language="JavaScript">
function toggle(source) {
  checkboxes = document.getElementsByName(source.name);
  for(var i in checkboxes)
    checkboxes[i].checked = source.checked;
}
</script>

    <tr>
    <td valign="middle" align="center"><input type="checkbox" onClick="toggle(this)" name="products-quote[]" value="0" /></td>
    <td valign="middle" align="center"><input type="checkbox" onClick="toggle(this)" name="products-sample[]" value="0" /></td>
    <td><p><b>Select all</b></p></td>
    </tr>

Answer 1

为什么不使用 document.forms['myForm'].elements 集合？

Answer 2

您犯了以下错误：

1. 如果忽略 PHP 部分，您的标记片段将无效 → W3C 标记验证器
2. 您尚未使用 var 关键字将 checkboxes 声明为（本地）变量，这很容易出错。
3. 您尚未使用由 W3C DOM 2 级 HTML。
4. 您尝试迭代实现 NodeList 接口的对象的属性="nofollow">W3C DOM Level 2+ Core，带有 for-in 语句。 for-in 迭代对象的可枚举属性，但此类宿主对象的属性不需要是可枚举的。事实上，它们具有数字名称的属性（您所追求的）是否是可枚举的，以及它们具有非数字名称的属性是否是可枚举的（！），取决于 DOM 实现。这解释了浏览器之间的差异。始终使用（C 风格）for 语句。

更改为：

<script type="text/javascript">
  function toggleAll(source)
  {
    var checked = source.checked;
    var checkboxes = source.form.elements[source.name];

    for (var i = checkboxes.length; i--;)
    {
      var checkbox = checkboxes[i];
      if (checkbox != source)
      {
        checkbox.checked = checked;
      }
    }
  }
</script>

…

<form …>
  <table …>
<?php
  foreach (… as $product_option)
  {
    /* DRY */
    $id = $product_option['id'];
?>
    <tr>
      <td><input type="checkbox" name="products-quote[]"
                 value="<?php echo $id; ?>"></td>
      <td><input type="checkbox" name="products-sample[]"
                 value="<?php echo $id; ?>"></td>
    </tr>
<?php
  }
?>
    <tr>
      <td><input type="checkbox" name="products-quote[]" value="0"
                 onclick="toggleAll(this)"></td>
      <td><input type="checkbox" name="products-sample[]" value="0"
                 onclick="toggleAll(this)"></td>
      <td>Select all</td>
    </tr>
  </table>
</form>

在本例中未经测试，但通常已得到证实。我删除了演示属性和元素，以便您可以更清楚地看到解决方案。您应该将它们替换为基于 CSS 的格式。

您可能还需要考虑为切换复选框指定不同的名称（以便您不必在客户端迭代和服务器端处理中排除它们），并将复选框组名称作为第二个字符串参数传递给 切换（...）。

Answer 3

使用索引可能是最有效的方法。因为，当我尝试枚举名为复选框的对象（像您一样）时，似乎在不同的浏览器中存储了不同对象的数量。
因此，尝试使用一个循环，直到 checkboxes 的长度为止并对其进行迭代。

function toggle(source) {
  checkboxes = document.getElementsByName(source.name);
  for(var i=0;i<checkboxes.length;i++)
  checkboxes[i].checked = source.checked;
}

Answer 4

更多帮助和最佳实践：
您可以通过以下元标记（字符集仅用于当前代码的兼容性）强制 IE 使用其边缘渲染引擎，而不是使用您正在使用的元标记

<meta charset="windows-1252" /> why are using this encoding instead of utf-8?

<meta http-equiv="X-UA-Compatible"  content="IT=edge,chrome=IE8"> 

，请注意，实际上并不需要添加 chrome=IE8，但如果您遇到一个 ie8 或更低版本的用户安装了 chorme 框架，它将使用 chrome 高级渲染引擎而不是 ie8

（顺便说一句，你也可以提示他们安装 google 框架 - 但这超出了主题）

根据我的经验，这个 hack 解决了很多问题神秘的IE8问题。

其他一些小问题：
1.您正在使用 language=javascript - 您不再需要它了..更好地使用 type=text/javascript （今天也几乎不需要，也许将来随着咖啡脚本等的兴起而相关）

2.包含脚本桌子里面！为什么？最好包含在 head 中，或者更好（为了性能）包含在主体部分的底部，并带有 $(document).ready 函数，甚至更好地包含在底部，带有 $.ready 并从不同的 js 文件调用以将 js 分开html 的其余部分。

现在是更重要的部分 - 您已经在页面中调用 jQuery - 让它完成繁重的工作！
Jquery 已经针对浏览器间兼容性、性能等进行了优化，使用起来也更简单：

您可以绑定切换事件，而无需“onclick”，例如：为复选框按钮添加“selectAll”类。

现在是脚本：

    $(document).ready(function(){
        $(".selectAll").click(function(){
          var b = $(this);
          if (b.checked){
              $('form input:checkbox [name=b.name]').each(function(i){
                this.prop("checked",true);
              });
          }
         });

   });

• 我知道这不是最优化的选择器..但这不是他现在的问题。

编辑：看来我在代码中犯了一些错误 - 已修复！就像魅力一样

Answer 5

尝试使用“getElementsByTagName”而不是“getElementsByName”。 getElementsByName 在 IE 中不起作用。