Not too long ago, one of my co-workers and I had quite an interesting problem: we needed to check every checkbox on a web form that had hundreds of checkboxes[footnote]1[/footnote]. If there had only been a few, we’d just go through and manually check each one; however, because of the sheer quantity and the time needed to actually check each box, we needed to find a faster way to get the job done.
We decided to use jQuery’s excellent selecting capabilities to check all of the boxes on the current page; however, there was one major problem with this solution: jQuery was not available on the page.
After some creative thinking (and quite a bit of Googling), we came up with a solution to get jQuery on the page. We would attempt to add the library onto the page ourselves, then use it from there.
Using Chrome[footnote]2[/footnote], we opened up a console session via the web inspector and typed this:
I would recommend typing it in as one line (seems to work better that way):
What’s happening here? Basically, we’re creating a new script element via the DOM and injecting a reference to Google’s hosted jQuery library into the head tag. Once that line is executed, you can access jQuery via the standard $ symbol. So, for our given situation, we just had to do this in the console:
After that, all of our checkboxes were checked! Easy enough.
[update]Per Obishawn’s suggested, I’ve created a bookmarklet for this.[/update]
Drag this link to your bookmark bar to use on any page: Inject jQuery Onto This Page
[footnote name=”1″]Why hundreds of checkboxes, you may ask. We had to mass update several products in one of our legacy systems. A large array of checkboxes was the only and easiest way to do the update.[/footnote]
[footnote name=”2″]Any browser that supports the WebKit Web Inspector or something similar, such as Firebug for Firefox, can do this.[/footnote]