23:42 Sun 02 Dec 2012. Updated: 21:04 03 Dec 2012
[, , , , , ]

I wrote a JavaScript utility that lets you create a rectangle on a web page by dragging your mouse cursor, and then toggles the state of all checkboxes under the cursor. If you’ve ever had to deal with forms that have lots and lots of checkboxes, you’ll know why I decided such a thing was necessary.

It’s on github.com as, sensibly enough, jscheckmate. Unfortunately, limitations in their implementation of reStructuredText for the readme file mean that it’s something of a pain to install, so I’ll include the easy way on this page, which is to drag the following link to your browser’s bookmarks:

Unfortunately, this won’t receive the benefits of updates to the code; hopefully I can figure out a way to make it installable by dragging on github.com, at which point I’ll delete the link on this page.


I found myself having to click on lots of checkboxes far too often. They’re small targets, and this is just an annoying user experience. I’m also trying to push myself to publish more code at the moment, even small things like this; after all, what’s the point of being a programmer if you can’t make these aspects of your life better? And once I’ve made it better for myself, it makes sense to share it.


The ugly truth is that even simple programming projects like this are rarely truly simple to write. This one was fairly straightforward. My approach was to create a rectangle, determine the page coordinates it covered, and then iterate through all checkboxes on the page to see which of them matched, and that turned out to be reasonably simple to implement.

The initial version was done in a few not-very-focused hours; that worked but didn’t have the visible rectangle to guide the user. I put off working on that for quite some time because I thought it would be more difficult than it was, but it was just some simple playing around with the mousemove event: whenever the mouse moves, run the function that calculates where the rectangle is and adjust the div element accordingly.

Naturally, there were plenty of minor syntax errors along the way, not all of which I found immediately; half-blind debugging is not the most fun aspect of programming. But the most irritating side of the whole project so far has been my failure to embed the javascript: URL containing the bookmarklet in a link on the output for the readme file on github.com, because there I’m simply dealing with a black box that I thought would follow the same rules as the standard reStructuredText parser/writer but evidently doesn’t.

Feedback Welcome!

If you regularly deal with pages containing lots of checkboxes you have to click on, I’d love to get feedback on whether you think this utility actually helps make that less annoying, or on suggested improvements. For now, I’m trying to use the github.com issues functionalty to track bugs, feature requests, or other responses.

Possible Other Projects

I’d like to release something every month, and these are the candidates at the moment:

  • A public version of my Amazon book lookup script.

    I have a script that takes an ISBN or ASIN and looks it up against the US and UK Amazon databases, and it might be useful to other bibliophiles who are also data hoarders like I am.

  • The server-side part of an application for handling bookmarks in a different way, one highlighted by the various use cases outlined in recent Mozilla research on the way that people use “bookmarks”. This is really an outgrowth of a longstanding project of mine, and one that I had already tried to set in motion in the past.

    This could be far more ambitious than a simple one-month project should be, but I’m hoping that I can get something in a month that would be useful to me—right now, I have no good system for any of the common uses for bookmarks, and this is something that I’ve wanted to fix for a long time.

  • The client side—presumably a bookmarklet—of the same application.
  • A public version of my reStructuredText-to-WordPress pipeline.

    I publish to WordPress more or less directly from Vim, editing in reStructuredText, and I use a variety of tools to make that smoother; I think it would be worthwhile to publish a generalized version of that toolchain.

  • A personal web server that serves things I have under version control, automatically serves reStructuredText from text files, and translates file:/// URLs into relative URLs.

    The motivation here is to make it easier for me to get around my own files using a browser. This isn’t entirely unrelated to the “better bookmarks” project, and both stem from a common root of feeling that somehow I’m missing out on the potential of hypertext—and that it wouldn’t take a huge amount of work to get closer to a workable Memex-like system.

One Response to “jsCheckMate”

  1. Clay Says:

    Very cool. I doubt I’ll use it, but I am glad it exists.

Leave a Reply