You are hereBlogs / alif's blog / ezMark: jQuery Checkbox & Radiobutton Plugin

ezMark: jQuery Checkbox & Radiobutton Plugin

By alif - Posted on 05 July 2010

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

Age

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

alif's blog

Tags

Hi thanks for the great

Submitted by Anonymous (not verified) on Mon, 10/17/2011 - 23:44.

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

This is great - one problem

Submitted by Anonymous (not verified) on Wed, 09/28/2011 - 07:57.

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.

Hi, I'm using your plugin

Submitted by Liam (not verified) on Wed, 05/11/2011 - 07:00.

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

Hi, thanks for using the

Submitted by alif on Thu, 05/12/2011 - 09:17.

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,

Hello, Doesn't work with

Submitted by Luis Sanchez (not verified) on Sun, 05/15/2011 - 12:31.

Hello,

Doesn't work with jquery 1.2.6 in IE, but with jquery 1.4.4 works fine in IE.

I use drupal, drupal 6 comes with jquery 1.2.6 but drupal 7 comes with jquery 1.4.4

Luis.

Good plugin. A suggestion: It

Submitted by Robert Dennis (not verified) on Wed, 03/23/2011 - 15:46.

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).

Did anyone come up with a fix

Submitted by James (not verified) on Wed, 03/02/2011 - 15:28.

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... :)

Sorry, I am still looking

Submitted by alif on Wed, 03/02/2011 - 17:00.

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.

It should be fixed now.

Submitted by alif on Mon, 04/25/2011 - 11:38.

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,

Hi, what if I wanted for each

Submitted by Claudio (not verified) on Tue, 03/01/2011 - 06:41.

Hi,
what if I wanted for each input type a different background?
Thanks!

Hello, you would have to

Submitted by alif on Wed, 03/02/2011 - 16:55.

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,

Okay, disregard the one from

Submitted by Serge (not verified) on Wed, 01/26/2011 - 06:38.

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

Really good plugin. I'm just

Submitted by Anze (not verified) on Tue, 11/16/2010 - 06:40.

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

Yes, it should. Although I am

Submitted by alif on Sun, 12/19/2010 - 22:58.

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

Submitted by Anze (not verified) on Tue, 01/18/2011 - 18:38.

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 :)

nice plugin but when i print

Submitted by Dan (not verified) on Wed, 11/10/2010 - 03:39.

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

when you print the page, make

Submitted by alif on Thu, 11/11/2010 - 12:51.

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

Thanks,

Great plugin! I only have one

Submitted by mishac (not verified) on Sat, 10/30/2010 - 22:43.

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

I just came across the same

Submitted by Jayde (not verified) on Fri, 12/17/2010 - 21:10.

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 {...}

But what about selects? ^_^

Submitted by Yu (not verified) on Wed, 10/27/2010 - 05:51.

But what about selects? ^_^

it does not work in IE.Works

Submitted by maidul (not verified) on Mon, 10/18/2010 - 11:03.

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

Hello, I have just checked on

Submitted by alif on Mon, 10/18/2010 - 16:15.

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

What version of IE are you using?.

Unregistered Click in IE For

Submitted by Jon (not verified) on Tue, 09/28/2010 - 19:36.

Unregistered Click in IE

For some reason its not registering the first click after the page loads for me.

i have an example setup here:
http://166.70.208.129/talkback/test.php

it happens to me while in IE8 but it seems fine in other browsers.

Unfortunately the download

Submitted by Andreas Dantz (not verified) on Mon, 09/13/2010 - 05:04.

Unfortunately the download seems down. Is there any chance to get the plugin elsewhere?

It is strange that the

Submitted by alif on Mon, 09/13/2010 - 22:07.

It is strange that the download on plugins.jquery.com is down!. I have uploaded it on my server. Its the 2nd link on my blog. You can download it directly from here:

http://www.itsalif.info/blogfiles/ezmark.zip

Thanks,

Great. jQuery plugin site is

Submitted by Anna (not verified) on Tue, 09/14/2010 - 10:50.

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

Hello alif, nice plugin,

Submitted by Daniel (not verified) on Sat, 08/28/2010 - 18:31.

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

Daniel, thanks for trying it

Submitted by alif on Sat, 08/28/2010 - 23:01.

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

Submitted by Jayde (not verified) on Tue, 11/02/2010 - 17:25.

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.

Works now like a charm, thank

Submitted by Daniel (not verified) on Mon, 08/30/2010 - 02:24.

Works now like a charm, thank you for your fast solution alif!

Regards Daniel

Hi, really useful and easy to

Submitted by Medwezys (not verified) on Fri, 08/27/2010 - 05:11.

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.

Thank you for pointing out

Submitted by alif on Sat, 08/28/2010 - 21:04.

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.

Hi there, I found your blog

Submitted by toplum (not verified) on Tue, 08/24/2010 - 16:06.

Hi there, I found your blog via Google while searching and your post looks very interesting for me
toplum

Very nice plugin! Love it.

Submitted by dominik (not verified) on Sun, 08/22/2010 - 05:57.

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)

Everytime you change the

Submitted by alif on Sat, 08/28/2010 - 23:14.

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.

Hi, Great plugin. One

Submitted by Mr. ice (not verified) on Thu, 08/19/2010 - 23:17.

Hi,

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

Thanks in advance.

Hello, Thanks for the

Submitted by alif on Sat, 08/28/2010 - 23:13.

Hello, Thanks for the comment.

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

Thanks,

how to customize view?just

Submitted by buzzknow (not verified) on Tue, 08/03/2010 - 05:13.

how to customize view?just change css only?

thanks

Yap, just changing CSS should

Submitted by alif on Fri, 08/06/2010 - 07:57.

Yap, just changing CSS should do it.

Neat plugin. Only suggestion

Submitted by Jonathan (not verified) on Mon, 08/02/2010 - 18:33.

Neat plugin. Only suggestion if it was more flexible.

Thanks great plugin, only

Submitted by Jon (not verified) on Mon, 08/02/2010 - 12:26.

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

Hmm... not sure if I can do

Submitted by alif on Fri, 08/06/2010 - 08:01.

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 :).

Hey man, how can I make

Submitted by dante (not verified) on Fri, 07/16/2010 - 18:57.

Hey man, how can I make checkboxes bigger, like 80x80px? I mean, i get the image, but it is not clickable :(

please help!

Hello, Yes, It can be done.

Submitted by alif on Sat, 07/17/2010 - 09:36.

Hello,

Yes, It can be done. You have to apply a width and height of 80px to the ez-hide class on CSS.

Open up the ezmark.css file, and change the ez-hide (add a width and height) :
.ez-hide { opacity: 0; filter:alpha(opacity=0); width: 80px; height: 80px; // or your suitable dimension }

I believe the above should do it.

To extend the [options]

Submitted by Andre (not verified) on Thu, 12/16/2010 - 08:16.

To extend the [options] parameters when using multiple styles and sizes, make the following changes to the .js:
var defaultOpt = { checkboxCls : options.checkboxCls || 'ez-checkbox' , radioCls : options.radioCls || 'ez-radio' , checkedCls : options.checkedCls || 'ez-checked' , selectedCls : options.selectedCls || 'ez-selected' , hideCls : options.hideCls || 'ez-hide' };
This way, you can dymanically set the hide-class as well:

$('#custom input').ezMark({hideCls: 'ez-hide-custom', checkboxCls:'ez-checkbox-custom', checkedCls: 'ez-checked-custom'});

Works like a charm.

Thanks for this great plugin!

Nice plugin. I like it.

Submitted by Emran (not verified) on Tue, 07/13/2010 - 16:00.

Nice plugin. I like it.

Hi, This doesn;t appear to

Submitted by RyanP13 (not verified) on Thu, 07/15/2010 - 12:14.

Hi,

This doesn;t appear to work for me in IE7 or IE6 :(

IE6 layout issue!!! :(. I

Submitted by alif on Sat, 07/17/2010 - 09:42.

IE6 layout issue!!! :(. I noticed there's a layout issue with IE6. IE7 or IE8 appears to be working fine.

This should be an easy CSS fix (the problem happens because inline-block is not supported in IE6). To fix it, pls change the height on ez-checkbox, and ez-radio class as below (declared on ezmark.css):

.ez-checkbox, .ez-radio { zoom: 1; *display:inline; _height:15px; // change to 15px from 30px }

I will be updating this fix today.

Works fine on IE7 & IE8 works

Submitted by Jose (not verified) on Thu, 07/15/2010 - 21:54.

Works fine on IE7 & IE8 works for me. The layout seems to be broken on IE6.

Really nice plugin. I have

Submitted by Daniel (not verified) on Thu, 07/08/2010 - 22:30.

Really nice plugin. I have tried few other similar plugins, but, this is a neat one.