ezMark: jQuery Checkbox & Radiobutton Plugin

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

Nice plugin. I like it.

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

please help!

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

Neat plugin. Only suggestion if it was more flexible.

how to customize view?just change css only?

thanks

Hi,

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

Thanks in advance.

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)

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

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.

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

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

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.

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

But what about selects? ^_^

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

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

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

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