简单的方法即可实现更改CheckBox样式.
演示 Code
jquery("input[@type='checkbox']", this).hide().each( function () {
jquery("<img>")
.src( this.checked ? opt.checked : opt.unchecked )
.click( function() {
var check = jquery(this).next()[0].checked == true;
jquery(this)
.src( check ? opt.unchecked : opt.checked )
.next()[0].checked = !check;
})
.insertBefore(this);
});
Usage
To target the functionality for a specific portion of your page/site use the native jquery selector engine in $().
$(document).ready( function () {
$().checkbox({checked: "checked.gif", unchecked: "unchecked.gif"});
});
For a more advanced version with label handling and styling through CSS see cssCheckbox Rewrite of the checkbox plugin based on someone's suggestion of using CSS and labels to style checkbox selection. The original suggestion was in reference to http://www.chriserwin.com/scripts/crir/.
Label tags are used to style the various states of checkboxes. Uses CSS background images for checkbox styles, however images are not required. Style the "checkboxes" anyway you like.
See cssRadio plugin for a similar method to style radio form input.
Requires jquery 1.0.1, give or take a rev
