Ordinary checkboxes on the web are a bit boring. I’ve seen a few replacement scripts, but I thought that it would be pretty easy to write my own.

function replaceCheckbox(name, on, off)
{
  $(name+':not(.checkbox-replaced)').each(function (){
    var image = ($(this).is(':checked') ? on : off);
    var imageElement = $('<img style="cursor:pointer;" src="'+image
      +'" onclick="$(this).next().click();"/>');
    $(this).before(imageElement).hide()
      .addClass('checkbox-replaced');
    imageElement.click(function (){
      $(this).attr('src',(this.src.indexOf(off) > 0 ? on : off));	
    });
  });
}

It seems to do the job fairly nicely, so I’m quite happy.  It does require the use of jQuery. To use it simply go:

replaceCheckbox('input[type=checkbox]:visible','check_on.png','check_off.png');

For the past day I’ve been struggling with a bit of Javascript. Like most problems involving browsers, it worked perfectly in Firefox (Whoo!) but died a horrible and confusing death in Internet Explorer (Boo!).

The code was using jQuery to clone a selection of rows in a table and append them to the same table. This worked fine, but one of the rows had an autocompleting field, which refused to work the second time someone did a search. This only applied to the duplicated rows, and only on the second search. The first time worked perfectly, no matter how many rows had been duplicated.

The culpret turned out to be a div that was wrapped around the added rows, in order to manipulate the new rows as one jQuery object. It turns out that if the DOM is not perfectly formed in IE, any future manipulation of the DOM will result in events being stripped.