选择所有在 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'].elementscollection？

Answer 2

你犯了以下错误：

1. 如果 PHP 部分被忽略，您的标记片段无效 → W3C Markup Validator
2. 您没有使用var 关键字声明checkboxes （本地）变量，这很容易出错。
3. 您尚未将向后兼容的实时集合用于由W3C DOM Level 2 HTML 标准化的表单和表单控件。
4. 您尝试使用for-in 语句迭代实现W3C DOM Level 2+ Core 的NodeList 接口的对象的属性。 for-in 迭代对象的可枚举属性，但此类宿主对象的属性不需要是可枚举的。事实上，它们的具有数字名称的属性（您所追求的）是否是可枚举的，以及它们具有 non-numeric 名称的属性是否是可枚举的（！），取决于 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 的格式替换它们。

您可能还想考虑为切换复选框赋予不同的名称（这样您就不必在客户端迭代和服务器端处理中排除它们），并将复选框组名称作为第二个字符串参数传递到toggle(…)。

Answer 3

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

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

Answer 4

更多帮助和最佳实践： 而不是元标记 tou 正在使用，您可以通过以下元标记强制 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 frame-但这不在主题范围内）

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

其他几个小问题： 1.您正在使用 language=javascript - 您不再需要它了.. 更好地使用 type=text/javascript （今天也几乎不需要，可能与咖啡脚本等的兴起有关）

2.脚本包含在表格中！为什么？最好包含在头部，甚至更好（为了性能）在正文部分的底部使用 $(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 中不起作用。