Check All Check Boxes

[pw]

Hi, I need to create a function in javascript to check or uncheck all
checkboxes in a form. From what I understand, I can do this either by
specifying the name of the check box fields such as:

function checkAll(list)
{
var o = document.getElementById(list);
var c = o.checked;
var f = document.forms.f;
var a = f.item(list);
for (var i = 0; i < a.length; i++)
a.checked = c;
}


or I can do this by looping through all of the fields in the form and
determining whether they are check boxes such as:

function selectAll(){
var frm = document.forms.f;

for (var i = 0; i < frm.length; i++)
if (frm.elements.type == 'checkbox')
frm.elements.checked = true;

}

My problem is that the Java code that I am stuck using generates a
unique name for each check box field. It generates the name of the
field in the format 'wire[X].wireAS' where [X] is a number that
increments sequentially based upon the number of fields in the form.

I can't use the second method, looping through all elements in the form
because it takes too long. A test page has 150 check boxes on it and
for each check box there are 8-9 hidden fields. Using IE 6 it takes
about 7 seconds to loop through each field and determine if it is a
check box. (Firefox takes <1 second).

Anyone have any ideas how I can solve this problem?

Thanks in advance.

 

[Mick White]

pw wrote:
[snip]

or I can do this by looping through all of the fields in the form and
determining whether they are check boxes such as:

function selectAll(){
var frm = document.forms.f;

for (var i = 0; i < frm.length; i++)
if (frm.elements.type == 'checkbox')
frm.elements.checked = true;

}

function selectAll(){
var frm = document.forms.f,i=frm.length;;
while(i--){
if (frm.elements.type == 'checkbox'){
frm.elements.checked = true;
}
}
}

Your loop constantly calculates the form length, and the while loop has
been shown to be more efficient.

Mick

 

[pw]

Thanks, the while loop is much more efficient. It decreased the time
from 7 seconds to 3 seconds in IE6. Any ideas how it can be made even
faster? Unfortunately 3 seconds still feels awfully long for our users.

 

[kaeli]

for (var i = 0; i < frm.length; i++)

Oops.
frm.elements.length

Hence, the discrepancies between MSIE and FF.

Anyone have any ideas how I can solve this problem?

Try changing that and see if it helps.
If not, can you edit the Java code generating this?

--
--
~kaeli~
Contrary to popular opinion, the plural of 'anecdote' is
not 'fact'.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[Mick White]

Thanks, the while loop is much more efficient. It decreased the time
from 7 seconds to 3 seconds in IE6. Any ideas how it can be made even
faster? Unfortunately 3 seconds still feels awfully long for our users.

I tried it with 500 checkboxes.

Safari: ~1.5 secs
FF: ~2 secs
Moz: ~1.75 secs

You maybe able to stuff the cbox object references into an arrray
onload, but I doubt that would speed things up.
Mick

 

[RobG]

Thanks, the while loop is much more efficient. It decreased the time
from 7 seconds to 3 seconds in IE6. Any ideas how it can be made even
faster? Unfortunately 3 seconds still feels awfully long for our users.

I believe do..while loops are faster, try the following (generates 500
checkboxes, each with 10 hidden inputs for a total of 5,000 elements).
IE churns through it in less than 0.2 seconds, Firefox in about 1.7
seconds.

I also tried it using createElement to generate the input as I had a
feeling that generating the inputs using innerHTML helped IE to run
faster - but it made it run quicker. I've kept the innerHTML method
as IE takes nearly 30 seconds to generate the form elements using
createElement (Firefox takes about 3 seconds with innerHTML or
createElement).


<script type="text/javascript">

// This just generates the form and elements
function genInputs(d){
var j, i=500;
var t=['<form name="X" action="">'];
while (i--) {
t.push('<input name="x',
i,
'" type="checkbox" size="10">Input ',
i,
'<br>');
j = 9;
while (j--) {
t.push('<input type="hidden" value="h',
i,
'-',
j,
'">');
}
}
document.getElementById(d).innerHTML = t.join('');
}

function checkAll(f){
f = f.elements;
alert('There are ' + f.length + ' elements');
var i = 0;
var startTime = new Date();
if (f){
do {
if ( 'checkbox' == f.type )
f.checked = true;
} while (f[++i])
}
var endTime = new Date();
alert('That took about ' + (endTime-startTime) + ' ms.');
}

window.onload = function() {genInputs('Y')};

</script>

<input type="button" value="click me" onclick="
checkAll(document.forms['X']);
">
<div id="Y"></div>

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated Tue,
24 May 2005 18:56:47, seen in Mick White

while(i--){
if (frm.elements.type == 'checkbox'){
frm.elements.checked = true;
}
}

This may be a little better, since it may reduce indexing :-

while (i--) { fi = frm.elements
if (fi.type == 'checkbox') fi.checked = true
}

Result depend on what proportion of elements are checkboxes.

I have no particular reason to suppose that using an overall
var C = 'checkbox' then if (fi.type == C) ... would be better,
but it can be tried.

 

[Matt Kruse]

I combined all approaches in this thread:
http://www.mattkruse.com/temp/cb_speed.html

By combining RobG's code with John's reference speedup, the speed difference
is dramatic, at least in IE.

 

[Lasse Reichstein Nielsen]

I combined all approaches in this thread:
http://www.mattkruse.com/temp/cb_speed.html

By combining RobG's code with John's reference speedup, the speed difference
is dramatic, at least in IE.

In Opera 8, the speedup is not so impressive. I get 64ms for the typical
version and 47ms for the RobG and RobG+John versions.

For some weird reason, both Mick White's and John Stockton's speedup
versions are 450+ms. It seems there is some optimization for accessing
sequentially in the forward direction - or rather, a serious
performance hit for doing it backwards. My guess is that lookup is
linear, but optimized for finding the value just after the previous
lookup.


In some versions there is an "if" with a "do/while" loop inside, bith
with almost the same condition. That could be changed to a single while loop,
e.g.:
---
function test5() {
var f = document.forms[0].elements;
var i = 0;
var fi;
var startTime = new Date();
while (fi=f[i++]){
if ( 'checkbox' == fi.type )
fi.checked = true;
}
var endTime = new Date();
alert('That took about ' + (endTime-startTime) + ' ms.');
}
---
No big difference in speed though

An even more hacked version of the loop is:

for(;(fi=f[i++])&&('checkbox'!=fi.type || (fi.checked=true));

.... but as far as I can see it is exactly as fast as the above, so
no power in obfuscation here .

/L