Check All checkboxes javascript help

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Check All checkboxes javascript help

Post by Benjamin »

I finished a complex form which dynamically creates itself based on answers to previous questions. Part of the functionality of this form is that all check boxes are checked by default. I have the following Javascript code which checks all checkboxes in a particular checkbox group.

Code: Select all

var formblock;
var forminputs;

function prepare() {
formblock= document.getElementById('FormName');
forminputs = formblock.getElementsByTagName('input');
}

function select_all(name, value) {
  for (i = 0; i < forminputs.length; i++) {
    var regex = new RegExp(name, "i");
    if (regex.test(forminputs[i].getAttribute('name'))) {
      if (value == '1') {
        forminputs[i].checked = true;
      } else {
        forminputs[i].checked = false;
      }
    }
  }
}

if (window.addEventListener) {
  window.addEventListener("load", prepare, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", prepare)
} else if (document.getElementById) {
  window.onload = prepare;
}
The problem happens when I view the form in Internet Exporer. I have an onload even which fires the select_all function for each group of checkboxes. It works fine in Firefox but in Internet Explorer I get the error: forminputs.length is null or not an object. Even with this error, clicking on the Check All box will select all the boxes, but it should have already been done.

The checkbox are in array format. i.e. <input type="checkbox" name="name[]" />

I don't know Javascript at all so if someone could tell me what is wrong and how to fix it I would appreciate it.
User avatar
wtf
Forum Contributor
Posts: 331
Joined: Thu Nov 03, 2005 5:27 pm

Post by wtf »

Why not just use checked attribute of the checkbox to set its state

<input type="checkbox" value="whatever" checked />
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

That is a good idea wtf, but now I am more curious as to why the code above doesn't work. As I already mentioned I don't know JavaScript at all, but I am guessing that the problem is with two onLoad events. One is in the code above, and the other one is in the body tag. I think IE is executing the onLoad event in the body tag before the onLoad event in the JavaScript. I have no clue though, that is just a guess.
tomprogers
Forum Commoner
Posts: 50
Joined: Fri Mar 17, 2006 5:17 pm
Location: Minnesota
Contact:

Scriptastic

Post by tomprogers »

agtlewis wrote:That is a good idea wtf, but now I am more curious as to why the code above doesn't work. As I already mentioned I don't know JavaScript at all, but I am guessing that the problem is with two onLoad events. One is in the code above, and the other one is in the body tag. I think IE is executing the onLoad event in the body tag before the onLoad event in the JavaScript. I have no clue though, that is just a guess.
I'd recommend you change your box-checking function slightly. Rather than getting all form inputs and loop through them as a collection, loop through them like this:

Code: Select all

for(e = 0; e < form.elements.length; e++)
{
	oElem = form.elements[e];
	if(oElem.tagName == 'CHECKBOX' && [name test])
		oElem.checked = true;
}
Obviously, you could wrap this in another for block that loops through every form on the page.

I skipped the name test, since you seem to have that worked out. But, do you know if JS regular expressions are implemented by the browsers and/or web standards you support? If not, you could just use the indexOf() method on oElem.tagName to match for the name passed to your function.

Also, rather than rely on a browser-dependent method of adding onload functions, I use this one. You may have some luck with it.

Code: Select all

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* more code to run on page load */ 
});
Edit: I rewrote this entire post so it might actually answer your question.
Post Reply