Weblog of Alif

Exploring the Web: An Apple a day

ezMark: jQuery Checkbox & Radiobutton Plugin

July 5, 2010 -- alif

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

Submitted by fredi (not verified) on

Hi,

what you mean with:

"Now, call the following method in your JS (to apply on all checkbox & radiobutton across the page): "
$('input').ezMark(); "

What i have to do? :/

Submitted by stefan (not verified) on

i ran across some problems when i put a checkbox as the only thing in a table cell.

seems that it helped to change display:inline-block to display:inline; so now it should look like:
.ez-checkbox {
background: transparent url('foo.png') 0 0px no-repeat;
display: inline;
}

.ez-radio {
background: transparent url('foo.png') 0 0px no-repeat;
display: inline;
}

Have fun!

Submitted by Mahmud Hossain (not verified) on

I love your plugin. For me, it works great on all the browsers except Chrome. I'm using custom png files for the check-boxes. The problem is that sometimes it shows only the unchecked image and sometimes the checked image. SOmetimes it shows blank. If I right click, and do inspect element, I can see the image is present. Then if I uncheck the css background attribute and check it again the png file shows up. Here's how my css and JS code look life:

/*--Custom Checkboxes --*/
.ez-hide { opacity: 0; filter:alpha(opacity=0); }
.ez-checkbox, .ez-radio { zoom: 1; *display:inline; _height:30px; }

.edu-et-cb0 {
background: transparent url('../images/common/cb/c0.png') no-repeat;
display:inline-block;
height: 15px;
width: 15px;
zoom: 1;
}

.edu-et-cb1 { background: transparent url('../images/common/cb/c1.png') no-repeat; zoom: 1; }
.edu-et-cb2 { background: transparent url('../images/common/cb/c2.png') no-repeat; zoom: 1; }
.edu-et-cb3 { background: transparent url('../images/common/cb/c3.png') no-repeat; zoom: 1; }
.edu-et-cb4 { background: transparent url('../images/common/cb/c4.png') no-repeat; zoom: 1; }
.edu-et-cb5 { background: transparent url('../images/common/cb/c5.png') no-repeat; zoom: 1; }
.edu-et-cb6 { background: transparent url('../images/common/cb/c6.png') no-repeat; zoom: 1; }
.edu-et-cb7 { background: transparent url('../images/common/cb/c7.png') no-repeat; zoom: 1; }
.edu-et-cb8 { background: transparent url('../images/common/cb/c8.png') no-repeat; zoom: 1; }
.edu-et-cb9 { background: transparent url('../images/common/cb/c9.png') no-repeat; zoom: 1; }
.edu-et-cb10 { background: transparent url('../images/common/cb/c10.png') no-repeat; zoom: 1; }

}

$('.edu-checkbox-cell').find(':checkbox').each(function(index) {
if (edu_et_cb_index > 9) { edu_et_cb_index = 0; }
$(this).ezMark({ checkboxCls: 'edu-et-cb0', checkedCls: 'edu-et-cb'+(edu_et_cb_index+1) });
edu_et_cb_index += 1;
});

Submitted by Mahmud (not verified) on

I really like your plugin. But I'm having a little problem with it. It works really well on every browser except Chrome. The images for the checkboxes don't appear all the time. Also for some reason, I'm getting double div tags around checkboxes. For example, <div class="edu-et-cb0 edu-et-cb1"><div class="edu-et-cb0 edu-et-cb1" ><input type="checkbox" checked="" class="ez-hide"></div></div>

Submitted by Edward E. Baumbach (not verified) on

It works perfectly! But not in IE7 and 8. where can I the fix for this? My friend, a DUI attorney in Tampa, wants this plugin to be put in his site too. If only I can fix this.

Submitted by sktzoOoTech (not verified) on

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

Submitted by Anonymous (not verified) on

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;
});
});

Submitted by Anonymous (not verified) on

This is great - one problem tho' - tabbing doesn't cause a change to the check boxes appearance - so when i tab around, I can't tell where I am. If there was a onfocus/onblur event, which subtly changed the checkbox, then you'd have a really brilliant plugin...

... and before anyone asks, lots of people can't use mice, and rely on tabbing around a page.

Still, one of the better checkbox styling pugins I've seen.

Submitted by L F (not verified) on

I handled this by putting tabindex="0" on each label (allowing the label to be "tabbed to"), then adding this jQuery:
$('.contact label.radio').keydown(function(event) {
if (event.which == 13) { $(this).click();}
});
This will trigger the same plugin code that executes on a mouseclick when the label has focus and the user hits Enter.
Tried it with keyboard only, and the correct radio value was submitted.

Submitted by Liam (not verified) on

Hi,

I'm using your plugin and it works really well, except in IE, the opacity doesn't appear to be hiding the radio/checkbox. In your demo it does. But it my version it doesn't hide them. I've tried a lot of stuff, to no avail.

Here is my css

.ez-hide {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
opacity: 0;
cursor: pointer;
}

.ez-checkbox, .ez-radio {
background: #f1f1f1 url('../images/haco/checkbox-haco.jpg') 0 0px no-repeat;
display:inline;
width: 19px;
height: 17px;
overflow: hidden;
cursor: pointer;
}

.ez-checked, .ez-selected {
background-position: 0 -18px;
cursor: pointer;
}

.ez-checkbox, .ez-radio{
zoom: 1;
*display:inline;
_height: 32px;
cursor: pointer;
}

Any input, would be greatly appreciated.

Thanks

Submitted by alif on

Hi, thanks for using the plugin. On what version of IE are you seeing this problem?. Is it on all IE, or a particular version of IE (6, 7, 8 etc.)?.

Thanks,

Submitted by Robert Dennis (not verified) on

Good plugin. A suggestion: It seems like it would be fairly straight-forward to impliment it as a tri-state check box by having to styles of checked (and tracking, of course).

Submitted by James (not verified) on

Did anyone come up with a fix for the IE problem with the checkboxes not being clickable? It doesn't work in IE9. Would love for this to work properly as I've been through 6 different scripts to replace the checkboxes and radio points and this is the only one that has worked correctly!
IE doesn't count... :)

Submitted by alif on

Sorry, I am still looking into the IE9 it. I haven't been able to fix it as of now.

I will update it as soon as i have the fix available.

IE definitely counts :-). It has been tested and should work fine on IE 6,7,8, only has issues on IE9, which i am looking into.

Submitted by alif on

It should be fixed now. Please upgrade IE9 to the final release. It seems the plugin had a problem with the beta (pre-release) version of IE.

The checkbox works fine with IE-9 final release.

Regards,

Submitted by alif on
Hello, you would have to customize CSS (create separate class) and invoke the method as below:
$('selector-for-checkbox').ezMark({
  checkboxCls : "your-customized-checkbox" ,
  checkedCls  : "your-customized-checkbox-checked-state"
});

Hope it helps,

Submitted by Serge (not verified) on
Okay, disregard the one from earlier earlier, forgot to add a check in case there was no callback.. typeof(callback == 'function') ... so that should make your script a little more useful :P
(function($) {
  $.fn.ezMark = function(options) {
    options = options || {};
    var defaultOpt = {
      checkboxCls : options.checkboxCls || 'ez-checkbox' ,
      radioCls : options.radioCls || 'ez-radio' ,
      checkedCls : options.checkedCls  || 'ez-checked'  ,
      selectedCls : options.selectedCls || 'ez-selected' ,
      hideCls : 'ez-hide',
      callback : function(e) { options.callback(e) }
    };

    return this.each(function() {
      var $this = $(this);
      var wrapTag = $this.attr('type') == 'checkbox' ? '
' : '
'; // for checkbox if( $this.attr('type') == 'checkbox') { $this.addClass(defaultOpt.hideCls).wrap(wrapTag).change(function(e) { if( $(this).is(':checked') ) { $(this).parent().addClass(defaultOpt.checkedCls); } else { $(this).parent().removeClass(defaultOpt.checkedCls); } (typeof(options.callback) == 'function') ? defaultOpt.callback(e) : '' }); if( $this.is(':checked') ) { $this.parent().addClass(defaultOpt.checkedCls); } } else if( $this.attr('type') == 'radio') { $this.addClass(defaultOpt.hideCls).wrap(wrapTag).change(function() { // radio button may contain groups! - so check for group $('input[name="'+$(this).attr('name')+'"]').each(function(e) { if( $(this).is(':checked') ) { $(this).parent().addClass(defaultOpt.selectedCls); } else { $(this).parent().removeClass(defaultOpt.selectedCls); } }); (typeof(options.callback) == 'function') ? defaultOpt.callback(e) : ''; }); if( $this.is(':checked') ) { $this.parent().addClass(defaultOpt.selectedCls); } } }); } })(jQuery);

Submitted by Anze (not verified) on

Really good plugin. I'm just missing delegate declaration, so it would work on ajax loaded content as well.. Any suggestions?

Submitted by alif on

Yes, it should. Although I am not exactly sure what you mean. But, the checkbox styling should also work with ajax loaded content.

You *may* have to trigger the 'change' event if needed

$('selector').trigger('change');

Sorry for responding late.

Thanks,

For now, for each ajax reload I use

$("input:not(.ez-hide)").ezMark();
$("table#viewPages input:disabled").parent().hide();

because I cannot ezmark all inputs, because some werent affected by ajax content load, and if I do it anyway, those get doubled graphics.

Maybe you could just implement refresh function, that checks for inputs that should have ezmark style but doesnt. That would probably fix the 'problem'.

Thanks anyway for a great plugin :)

Submitted by Dan (not verified) on

nice plugin but when i print the page, how come it doesnt print checkmarks?

Submitted by alif on

when you print the page, make sure you print the background images as well. The Checkmark shows on background image.

Thanks,

Submitted by mishac (not verified) on

Great plugin! I only have one issue..is there any way to make it handle disabled checkboxes?

I just came across the same requirement for a project that I am working on. I am not sure what you require but I was able to style disabled boxes like this:


$(input.styled:checkbox:disabled).closest('.ez-checkbox').addClass('disabled');

Then you can style the disabled checkbox like this:

.ez-checkbox.disabled {...}

Submitted by Timon Devos (not verified) on

Could you explain? Because when I trie to disable the checkboxes the way you did it doesn't work for me... I could use some help.

Submitted by maidul (not verified) on

it does not work in IE.Works fine in other browser.Your demo also not working in IE

Submitted by alif on

Hello, I have just checked on IE6/7/8 and it seems to work fine for me.

What version of IE are you using?.

Submitted by Anna (not verified) on

Great. jQuery plugin site is not working. Thank you for a separate download.

Submitted by Daniel (not verified) on

Hello alif,

nice plugin, thank you. But there is one big issue like some other pepole before already mentioned: The state css of the checkbox doesn't change if you set it with javascript although the box itself has the checked value applied correctly.

regards, daniel

Submitted by alif on
Daniel, thanks for trying it out. To achieve check all or uncheck all functionality, you would have to trigger "onchange" event manually.
Something like below should do it:
$('[check-all-btn-selector]').click(function(e) {
   $('[input-checkbox-selector]').each(function() {
	$(this).attr({"checked":"checked"}); // set checked=true
        $(this).trigger('change'); // trigger change
    });
    return false;
});

I have also update my demo to add an check-all and uncheck-all button to show it properly as several people have asked it.

I hope this helps,

I love this plugin. I was trying to create one check/uncheck all button using your example. This is what I came up with. If you have any suggestions on how it could be improved please let me know. I tested this in IE7/IE8, Chrome and FireFox 3.

I wanted to limit it to a fieldset because I have multiple groups of fields.


var checkGroupCheckAll = $('.checkGroup .checkAll');
var checkGroupCheckAllLabel = $('.checkGroup .checkAll');
var checkGroupCheckInput = $('.checkContent input:checkbox');

$(checkGroupCheckInput).live('click', function(){
if( $(this).closest('fieldset').find('.checkAll').is(':checked') ){
$(this).closest('fieldset').find('.checkAll').attr('checked', false);
}
$(this).trigger('change'); // required to trigger graphical change
});

$(checkGroupCheckAll).live('click',function(){
$(this).closest('.checkGroup').find('.checkContent input:checkbox, .checkHeader input:checkbox, .checkFooter input:checkbox').attr('checked',this.checked).each(function() {
$(this).trigger('change'); // required to trigger graphical change
});
});

Thanks,

Jayde.

Submitted by Medwezys (not verified) on

Hi, really useful and easy to use plugin! I'll add It to to my bookmarks. However demo has some problems in mobile safari - bg image of unchecked boxes appears to be too big, I can see the top part of the checked box bg in the sprite.

Submitted by alif on

Thank you for pointing out the issue. I haven't really tested my script on iPhone before. I do notice it now. To fix it, either different background images can be used (instead of sprite), or more spaces (vertical) could be added between the checked and unchecked status.

I will update the image in my next version.

Submitted by dominik (not verified) on

Very nice plugin! Love it. Have only one single problem: How do I switch the checked-status width javascript? [...].checked="true" doesn't change the div (of course not)

Submitted by alif on

Everytime you change the checked status with Javascript, you will have to trigger a change event.

$([selector]).trigger('change');

Please check out the demo. I have added a check-all and uncheck-all functionality.

Submitted by Mr. ice (not verified) on

Hi,

Great plugin. One question though, do you have any example for check all functionality?

Thanks in advance.

Submitted by alif on

Hello, Thanks for the comment.

I updated my demo to show a "check-all" and uncheck all functionality.

Thanks,

Submitted by Jon (not verified) on

Thanks great plugin, only comment would be it would nice if the ez-selected state could effect the form's labels - e.g. if a radio box was selected its label would be bold.

Not sure if this is possible without making the plugin more bloated than it needs to be

Submitted by alif on

Hmm... not sure if I can do that without making the code more bloated. Maybe I could add a callback method for onchange event, that would allow developers to add their code for onchange event on the callback method. I will think about it.

Thanks for trying out the plugin :).

Pages

Add new comment