Javascript Incompatibility with Mozilla

Question

The below javascript is working fine in IE but not in Mozilla. We have a header checkbox,onClick of which all the other checkboxes in the page gets selected/unselected. Can anyone help?

 <script language="javascript">
  function SelectAll() {
      var frm = document.forms[0];
      var j = frm.elements.length;
      var checkAll = document.getElementById("checkAll");
      var checkBoxCount = 0;

      if(checkAll.checked == true) {
          var i = 0;
          while(i != j) {
              if (frm.elements[i].type == "checkbox") {
                  frm.elements[i].checked = true;
                  checkBoxCount++;
              }
              i++;
          }

          var chkAll = document.getElementById("checkAll");
          chkAll.checked = true;
      } else {
          var i = 0;
          while(i != j) {
              if (frm.elements[i].type == "checkbox") {
                  frm.elements[i].checked = false;
              }
              i++;
          }
          var unchkAll = document.getElementById("checkAll");
          unchkAll.checked = false;
      }
  }

Answer 1

If you don't have a strong reason not to, I suggest using a JavaScript library such as jQuery, MooTools etc. They are built with multi-browser compatibility in mind and make doing things like what you are trying to do really trivial.

Answer 2

Ok, here's a much better way to do it. In your HTML, make your checkbox like this:

<input type="checkbox" onclick="selectAll(this)" />

And then your Javascript:

function selectAll(checkbox) {
    var form = checkbox.form;
    for (var i = 0, l = form.elements.length; i < l; ++i) {
        if (form.elements[i].type == 'checkbox') {
            form.elements[i].checked = checkbox.checked;
        }
    }
}

Here it is for you to test out: http://jsbin.com/idadi

If this is going into an XSLT (for whatever reason), then the simplest way to make sure the < doesn't stuff it up is to make it CDATA, like this

<someElement><![CDATA[
    function selectAll() { 
        // as above
    }
]]></someElement>

Answer 3

You can replace you function with something similar to this. Here's a Working Demo that works for me in Firefox. add /edit to the URL to see the code

  function SelectAll() {
      var frm = document.forms[0];
      var j = frm.getElementsByTagName('input');
      var checkAll = document.getElementById("checkAll");

      for (var i=0; i < j.length; i++) {
        if (j[i].type == "checkbox") {
          j[i].checked = checkAll.checked; 
        }
      }             
  }

EDIT:

If you need to avoid the use of the < symbol in the code, it could be rewritten like so (I've tidied up some of the other code too).

  function SelectAll() {
      var elements = document.forms[0].elements;
      var i = elements.length;
      var checkAll = document.getElementById("checkAll");

      while (i--) {
        if (elements[i].type === "checkbox")
          elements[i].checked = checkAll.checked;
      }

  }

Answer 4

I simplified your code into just this:

function SelectAll() {
   var elements = document.forms[0].elements;
   var check = document.getElementById("checkAll").checked;
   for (var i = 0; i < elements.length; i++) {
      if (elements[i].type == "checkbox") {
         elements[i].checked = check;
      }
   }
}

I tried it in Firefox, and it works.