Fast way to check 2000 flags in Javascript?

Question

I have a webpage with several thousand checkboxes on it, and I would like to add the Check All feature. Unfortunately, my current implementation freezes Google Chrome for at least five seconds.

Here is what I tried (using jQuery):

$('input').attr('checked', true); // as well as... $('input').click(); 

I believe that actual Javascript is fast, however the browser may have problems updating all updates so fast. Can I do something else?

Here is a simplified example: https://www.msu.edu/~weinjare/checkboxes.html

I also launched Profiler, built into Chrome, and got the following results:

Answer 1

Accessing the DOM attributes directly may be faster, although I assume that it will not be significantly faster:

 var els = $('input'); for (var i = 0; i < els.length; i++) { els[i].checked = true; } 

But, as you say, the biggest problem is probably rendering. You can try to set tolerance in setIntervals to 0 milliseconds. This will not speed anything up, but at least it will stop the “freeze”:

 var els = $('input'), i = 0; var interval = setInterval(function () { var batchLen = i + 100 > els.length ? els.length : i + 100; for (; i < batchLen; i++) { els[i].checked = true; } if (i === els.length) clearInterval(interval); }, 0); 

Answer 2

Practical implementation of this solution aside from Chrome seems much faster if you first clear the checkbox container, generate a lot as a string with a verified attribute and add it back to the DOM. So in your example, this will be (just need to surround the checkboxes with a div with id fields)

 <script> var checkAll = function() { html =""; $("#boxes").empty(); for (i=0;i<2000;i++) { html+="<input type=checkbox checked>"; } $("#boxes").append(html); return false;} var uncheckAll = function() { html =""; $("#boxes").empty(); for (i=0;i<2000;i++) { html+="<input type=checkbox>"; } $("#boxes").append(html); return false;}; </script> 

Answer 3

Firefox takes about 0.5 seconds. Are you sure the problem is Google Chrome?

Answer 4

DOM operations are very slow, as you already noticed ... Something you can do to avoid hacking the browser is to use the convenient setTimeout function, which allows you to delay the execution of the function. This way you return the stream to the browser to make it responsive ...

  var checkAll = function() { var inputs = $('input'); var n = inputs.length; for (var i = 0; i < n; i++) { (function(i){ setTimeout(function(){ $(inputs.get(i)).attr('checked', true); },0); })(i); } return false; }; 

Answer 5

I'm not a big fan of chrome. I tried in the old version of chrome and jquery that I have.

Official Build 2200 Mozilla / 5.0 (Windows, U, Windows NT 5.2, en-US) AppleWebKit / 525.13 (KHTML, e.g. Gecko) Chrome / 0.2.149.30 Safari / 525.13

jQuery 1.4.2

Flags are marked in 0.5 seconds. Which version are you using?

Answer 6

to try:

 $('input[type="checkbox"]').attr('checked', true);