Cool Alternatives to HTML Checkbox

Question

ok not just checkbox, but also radio button. The thing is I have a zillion check-boxes & radio-buttons on my form & it looks ugly as hell.

This is not a functionality issue but a purely UI issue. I am looking for some cooler looking ways to implement the same task.

Oh I am using jQuery 1.4.3

UPDATE: I got this jQuery Plugin for the same. It's awesome!! Thanks all... Attached the screenshot of the one I am using now. This one I liked because, it kinda looks like a iPhone style but is not an exact clone.

Solution 1

Wouldn't a drop-down menu work to replace many check-boxes/radio buttons? You could enable multiple selections to replecate check box behaviour. Generally that is what I would do if I had more than one or two check boxes on the same subject...

Or do you mean they are about separate things? In that case, could you post some idea of what information you're trying to get from the user?

Solution 2

This is a slightly more advanced task than changing the border of edit-fields. The best method would be to hide the checkbox/radiobutton and replacing it with a dummy element. The problem with this approach is to keep both elements synced. The radiobutton-image needs to know when another radiobutton has been checked, etc. This requires some advanced event-ping-pong. You could do it like this for checkboxes (untested):

$(':checkbox').each(function () {
   var checkbox = $(this),
      fakebox = $(document.createElement('span')).addClass('custom-checkbox');

   // toggle and trigger update of the real checkbox
   fakebox.click(function () {
      checkbox.attr('checked', !checkbox.attr('checked')).change();
   });

   // changes to the real checkbox causes the fake checkbox to update its status
   checkbox.change(function () {
      if (checkbox.attr('checked')) {
         fakebox.addClass('custom-checkbox-checked');
      } else {
         fakebox.removeClass('custom-checkbox-checked');
      }
   });

   // initialize
   checkbox.change().hide();
   fakebox.insertAfter(checkbox);
});