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

您犯了以下错误：

如果忽略PHP部分，您的标记片段无效→W3C Markup Validator
您尚未使用checkboxes关键字声明var一个（本地）变量，这很容易出错。
您尚未对W3C DOM Level 2 HTML标准化的表单和表单控件使用向后兼容的实时集合。
您尝试使用NodeList - for语句迭代实现W3C DOM Level 2+ Core 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的格式替换那些格式。

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

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

更多帮助和最佳实践：而不是元标记tou正在使用你可以强制IE使用他的边缘rendring引擎通过以下元标记（charset只是为了兼容当前代码）

<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但是如果遇到安装了chorme框架的ie8或更少的用户，则会使用chrome高级渲染引擎而不是ie8

（顺便说一句，你也可以提示他们安装谷歌框架 - 但这不属于主题）

从我的经验来看，这个黑客解决了很多神秘的IE8问题。

其他一些小问题： 1.你正在使用language = javascript - 你不再需要它了...更好地使用type = text / javascript（今天几乎不需要，或者将来可能与coffeescript等有关）

2.脚本包含在表格内！为什么？更好地包含在头部或甚至更好（性能）在body部分的底部使用$（document）.ready函数，或者更好的底部使用$ .ready并从另一个js文件中调用以分离js来自其余的HTML。

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

你可以在没有“onclick”的情况下绑定toggle事件，例如：为复选框按钮添加一个'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中不起作用。

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

5 个答案: