ezMark is a jQuery Plugin that allows you to stylize Radio button and Checkbox easily. Its very small (minified version is ~1.5kb) compared to other similar scripts. It has been tested and works on all major browsers (IE 6/7/8, Firefox, Safari, Chrome) and it gracefully degrades.
It has the following Method:
$('selector').ezMark( [options] );
Basic Usage:
Include the CSS file:
Then include the jquery.js file and the plugin file:
Write the HTML tags normally, as you would type them
Now, call the following method in your JS (to apply on all checkbox & radiobutton across the page):
$('input').ezMark();
Likewise, you can also use custom selectors for checkbox or radiobuttons:
// to apply only to checkbox use:
$('input[type="checkbox"]').ezMark();
// for only radio buttons:
$('input[type="radio"]').ezMark();
Parameters:
options parameter accepts the following JSON properties:
| Parameter's (JSON) Properties: | Explanation/Details of the Property |
|---|---|
| checkboxCls | The Checkbox Class as per declaration on CSS. |
| checkedCls | The Checkbox Class on Checked State |
| radioCls | The Radio button's Class as per CSS |
| selectedCls | The Radio Button's Class on selected State |
To customize the default checkbox/radiobutton image, change the background image (checkbox-black.png/radio-black.png) and CSS (ez-checkbox/ez-radio) and (ez-checked/ez-selected) accordingly.
Customized Usage:
After you have customized/created your own css class. Simply call the ezmark method like below:
// to apply only to checkbox use:
$('input[type="checkbox"]').ezMark({
checkboxCls: 'your-default-checkbox-class-name' ,
checkedCls: 'your-checkbox-class-in-checked-state'
});
// for only radio buttons:
$('input[type="checkbox"]').ezMark({
radioCls: 'your-default-radiobutton-class-name' ,
selectedCls: 'your-radiobutton-class-in-selected-state'
});
View Demo Download from Github Download from jQuery Server
Comments
Hi thanks for the great
Hi thanks for the great script.One question. I'm using single checkbox to select multiple checkboxes, which works fine, but the master checkbox that selects others never gets selected when clicked on. Here is the code:
$(function () {
$('#masterCheckbox').click(function(e) {
$('input[name^="did"]').each(function() {
($(this).is(':checked')) ? $(this).removeAttr('checked') : $(this).attr({"checked":"checked"});
$(this).trigger('change');
});
return false;
});
});
Hi, I really love this plugin
Hi,
I really love this plugin but i wonder when will be the IE 9 compatible version be available? It works in IE 9 but unfortunately it breaks my other jquery plugins.
Cheers,
Davis
Pages
Add new comment