As I mentioned before, I am re-working my CMS administration layout and styles. In the process I decided that I disliked having simple checkbox inputs, so I tried jQuery-UI’s .button() method, and while it wasn’t bad, I didn’t get the main feature I wanted1: a graphical check that should (dis)appear.

Well, I’ve made my own jQuery checkboxes before using uniquely laid out HTML divs and a beastly jQuery function I wrote; the script was only 17 lines, but it made too many calls for my tastes.

“Frag that” I said figuring I could make it simpler, and so I did.

The new jQuery:

$("input[type=checkbox]").each(function(){
  if(label = $("label[for="+$(this).attr('id')+"]")) {
    $(this).hide();
    label.prepend("");
    label.addClass('chbx' + ($(this).is(":checked") ? ' checked' : ''));
    label.hover(function(){ $(this).toggleClass('hover'); });
    label.click(function(){
      $(this).toggleClass('checked');
      $("input[id="+$(this).attr('for')+"]").click(function(){ $(this).attr("checked"); });
    });
  } //end if(label)
});

And the HTML? Same thing that jQuery-UI requires:

<input id="myId" type="checkbox" name="doYouCare" value="1" />
<label for="myId">Label text here</label>

Much simpler than what I was using and a lot more flexible! :)

The CSS base:

label.chbx {
  display:inline-block; padding:4px 10px; margin:0px 2px 2px 0px;
  color:#666; text-align:center; font-size:13px; line-height:20px;
  background-color:#FFF;  border: 1px solid #D3D3D3; cursor:pointer;
  -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
}
label.chbx.hover { border-color:#000; box-shadow:2px 2px 2px #333; }
label.chbx.checked { border-color:#F99F1B; color:#000; }
label.chbx span {
  display:inline-block; width:10px; height:10px; margin-right:4px;
  background-image:url(images/label-chbx.png);
  background-position:left top; background-repeat:no-repeat;
}
label.chbx.hover span { background-position:right top; }
label.chbx.checked span { background-position:right bottom; }
label.chbx.checked.hover span { background-position:left bottom; }

Footnotes:
1 While jQuery-UI v1.8.18 does not support state-change icons, I have hope it soon might.