on Sep 19th, 2008Styled checkboxes & radiobuttons with jQuery
Updated
- Added support for hover, mousedown events
- Merged radize into checkize, so only call checkize from now on
- Pre-loads images
- Added support for “show_input” that will display the input boxes also (in FF&Safari, only input boxes in IE) - useful for debugging.
So, time for another small jQuery extension I wrote up - for myself this time, it’s for styling check boxes and radio buttons, all in all it’s *very* self explanatory and I don’t see much point in trying to describe it, usage is very simple:
$(document).ready(function(){
$("input").checkize({
checked:"images/checked.gif",
checked_down:"images/checked_down.gif",
checked_hover:"images/checked_hover.gif",
unchecked:"images/unchecked.gif",
unchecked_down:"images/unchecked_down.gif",
unchecked_hover:"images/unchecked_hover.gif"
});
});
Live demo here: http://totmacher.eu/jquery/radio/demo/
Source as text: http://totmacher.eu/jquery/radio/src/jquery.checkize.js
Download example code + source in one .zip-file: http://totmacher.eu/jquery/radio_v0.2.zip
Enjoy!
I have a couple of suggestions.
1. You could add some more states to the plugin, like hover-unchecked, however-checked and mousedown.
2. Perhaps the checkize() function itself could check whether the input objects are radio buttons/checkboxes? This would remove the need for the radize function.
Nice work, keep it up :)
Only one problem, tabbing through a form will not work with this method. None-the-less, a very interesting idea.
You should pre-load the images as well, I saw some lag in the live demo when I checked my first box. I suppose one could make the argument that the user of the library should worry about pre-loading the images, but it’d be nicer if checkize et al took care of it automatically.
hey, is there any quick solution to check if all “checkized” checkboxes are selected? i mean at least one radio is checked per group - in all groups.
[…] Fuente: Love and Theft […]
Nice mod!!, but I dont quit get this issue, “When retrieving a Checkbox value from DB , lets say true, the (Checked checkbox)only shows after reloading the page a couple of , what gives?, is it a preload thing or the JS , unable to read the prefilled value of the checkbox, Just inches away from getting this to work..
Anyways, thanks in advance…