选择所有输入IE8

Question

不工作我有这个页面在其他浏览器上工作的全选按钮，但不是IE8，任何人都可以看到的问题，但在看我的源？

UPDATE：

这是我的代码：

<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

你已经做了以下错误：

1. 你的标记片段，如果PHP段都被忽略，是不是→W3C Markup Validator
2. 有效的您还没有宣布checkboxes（本地）变量，关键字var，这是容易出错的。
3. 您还没有利用由W3C DOM Level 2 HTML标准化的形式和窗体控件的向后兼容的现场集合。
4. 您试图迭代使用for - in语句实现NodeList接口W3C DOM Level 2+ Core的对象的属性。 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 2

尝试 '的getElementsByTagName' 而不是 'getElementsByName'。 getElementsByName在IE中不起作用。

Answer 3

为什么只是没有使用document.forms['myForm'].elements收藏？

Answer 4

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

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

Answer 5

更多的帮助和最佳实践：不是meta标签土特产品 使用可以迫使IE浏览器通过下面的meta标签使用他的边缘rendring引擎（字符集只是为了兼容当前代码）

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

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

通知，添加铬=是不是真的需要IE8但是如果遇到用户用IE8或小于安装chorme框架，它将利用先进的铬

（由你也可以迅速的方式渲染引擎，而不是IE8

他们安装谷歌框架 - 但这是没有主题）

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

其他几个小问题： 1.you正在使用language = javascript - 你不需要这个了..更好的使用type = text/javascript（今天几乎不需要，也许在将来会有相关的coffeescript等）

2.脚本包含在表格内！为什么？更好地包含在头部，甚至更好（用于表现）在身体部分的底部，使用$（document）.ready函数，或者甚至更好地在底部使用$ .ready，并从不同的js文件中调用以从js中分离js剩下的html。

现在更重要的部分 - 你已经在你的页面中调用jQuery - 让它完成繁重的工作！ jQuery是已经为浏览器之间的兼容性，性能等进行了优化，它也更易于使用：

，你可以不带“onclick”事件的触发事件绑定的东西，如：添加一个“全选”类的复选框纽扣。

现在对于脚本：

$(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); 
       }); 
      } 
     }); 

    }); 

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

编辑：似乎我在代码中犯了几个错误 - 修正！并且像魅力一样工作