3DM Design

Have you ever used a site with a bunch of checkboxes, and you needed to check all of the checkboxes but they didn’t provide that feature directly in their user interface? You might shrug, and click away until the job is done… or use the “JavaScript command line” aka your browser’s address bar, to do it the power-user way.

I realize that may not be a common problem, but in my day job I kept running into it while adding hundreds of keywords at MSN’s adCenter (wanting all of them to use all match types).

Hasn’t someone else already solved this problem? Seems very likely, but my searches were only pulling up examples of “check all” functions to use on your own site, so after a bit of coding I present to you my check-all checkboxes function:

function check_all_in_document(doc)
{
  var c = new Array();
  c = doc.getElementsByTagName('input');
  for (var i = 0; i < c.length; i++)
  {
    if (c[i].type == 'checkbox')
    {
      c[i].checked = true;
    }
  }
}

As the name suggests, it finds all checkboxes in a given document and checks them. Pretty simple. It accepts as an argument a document object, allowing for easy iteration through frames with a function like this:

function checkem()
{
  check_all_in_document(window.document);
  for (var j = 0; j < window.frames.length; j++)
  {
    check_all_in_document(window.frames[j].document);
  }
}

This function simply iterates through frames to ensure all checkboxes in all frames get checked. An important bit of brute force when dealing with a problem like mine, with MSN adCenter, where my first attempt failed because of frames trickiness.

Instead of using these as functions in your own page (though they can work for that if need be), they’re meant to be combined in one power tool for your browser. Here’s the one-liner you can paste in your browser’s address bar for instant gratification:

javascript:function check_all_in_document(doc){var c=new Array();c=doc.getElementsByTagName('input');for(var i=0;i<c.length;i++){if(c[i].type=='checkbox'){c[i].checked=true;}}}check_all_in_document(window.document);for(var j=0;j<window.frames.length;j++){check_all_in_document(window.frames[j].document);}

The one-liner version also works well as a browser button/bookmarklet, if you like having it handy.

Update (20070506): MSN adCenter recently changed their interface, now the check all checkboxes script doesn’t work (probably checking a hidden checkbox that relates to an Ajax/navigation feature, going by the alert). However they also added a “bulk edit” feature that allows the various match type checkboxes to be set en masse. Did somebody over there read this post? Or was it actually that the bulk edit feature was there all along and I just didn’t notice until their update? Hmm.

Either way, this little JavaScript is still valid and I don’t doubt there are other instances where it may find use.