Question

I have a select all button on this page that works on other browsers but not IE8, can anyone see the problem but looking at my source?

UPDATE:

This is my code:

<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

You have made the following mistakes:

1. Your markup fragment, if the PHP sections are ignored, is not Valid → W3C Markup Validator
2. You have not declared checkboxes a (local) variable with the var keyword, which is error-prone.
3. You have not made use of the backwards-compatible live collections for forms and form controls standardized by W3C DOM Level 2 HTML.
4. You have attempted to iterate over the properties of an object implementing the NodeList interface of W3C DOM Level 2+ Core with a for–in statement. for–in iterates over enumerable properties of an object, but the properties of such host objects do not need to be enumerable. In fact, whether their properties with numeric name (which you were after) are enumerable, and whether their properties with non-numeric name are enumerable(!), depends on the DOM implementation. That accounts for the differences between browsers. Always use a (C-style) for statement there.

Change to:

<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>

Untested in this case, but generally proved. I have removed the presentational attributes and elements so that you can see the solution more clearly. You should replace those with CSS-based formatting.

You might also want to consider giving the toggle checkboxes different names (so that you do not have to exclude them in the client-side iteration and server-side processing), and passing the checkbox group name as a second, string argument to toggle(…).