Выбрать все входные данные, не работающие в 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

Почему бы просто не использовать document.forms['myForm'].elements коллекцию?

Answer 2

Вы допустили следующие ошибки:

1. Ваш фрагмент разметки, если разделы PHP игнорируются, недействителен → W3C Validator Markup Validator
2. Выне объявили checkboxes (локальную) переменную с ключевым словом var, которая подвержена ошибкам.
3. Вы не использовали обратно совместимые живые коллекции для форм и элементов управления форм, стандартизованных W3C DOM Level 2 HTML .
4. Вы попытались перебрать свойства объекта, реализующего интерфейс NodeList 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 .

Вы также можете рассмотреть возможность присвоения переключателям различных имен (чтобы вам не пришлось исключать их в итерации на стороне клиента).обработка на стороне сервера) и передача имени группы флажков в качестве второго строкового аргумента в toggle(…).

Answer 3

дополнительная помощь и лучшие практики: вместо того, чтобы использовать метатег 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, но это не в тему)

По моему опыту, этот хак решает множество загадочных проблем с IE8.

пара других мелких проблем: 1. Вы используете language = javascript - вам это больше не нужно… лучше использовать type = text / javascript (также почти не нужно сегодня, возможно, актуально в будущем с ростом coffeescript и т. Д.)

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

   });

• Я знаю, что это не самый оптимизированный селектор ... но сейчас это не его проблема.

edit: кажется, я сделал несколько ошибок в коде - исправлено! и работает как шарм

Answer 4

Использование индексов может быть наиболее эффективным методом. Потому что, когда я пытался перечислить объект с именем checkboxes (как у вас), похоже, хранилось количество разных объектов в разных браузерах.
Итак, попробуйте использовать цикл, рассчитывающий до длины checkboxes, и повторяйте его.

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

Answer 5

Попробуйте 'getElementsByTagName' вместо 'getElementsByName'. getElementsByName не работает в IE.