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

• Joachim Sauer: Install firebug and debug it on mozilla...
• rahul: This works fine for me in FF 3.5.
• archana roy: the check/uncheck functionality doesnt work in Mozilla
• Christoph: every 15 minutes, someone posts an answer with basically the same code; should I wait another 15 minutes for 'my' version?
• archana roy: Christoph..do u have any other version?

Answer 1

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>

• archana roy: Thanx Nickf. This solution works for me in .net. But in an xslt file, its unable to recognize the '<' symbol. So cant implement it there. Is there any way to replace ur code without using < symbol?
• archana roy: Nick...how do we use this CDATA in xslt?

Answer 2

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

• Christoph: the check for .type == "checkbox" should be within the loop: you don't want to terminate on non-checkbox elements!
• archana roy: Thanx Russ. The code works fine in .net. But in an xslt file,its unable to recognize the '<' symbol. So is there any way we can use ur code but without the '<' symbol?
• Russ Cam: @Christoph - Thanks, I wasn't thinking!
• Russ Cam: no probs. The while loop works as 0 is a falsy value. Therefore when decrementing i and it's value reaches 0, the loop stops.
• archana roy: Russ,actually in Mozilla we are not able to recognize the below object...and hence no code is running. Do you have a fix ? var checkAll = document.getElementById("checkAll"); I tried to alert(checkAll) after the above line. In IE it returns- object but in MOzilla it returns-null.

Answer 3

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.

Answer 4

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.