当我使用库初始化元素时,它会像文档描述https://github.com/fronteed/iCheck/#how-it-works那样变形但是不透明度为零.

你可以在这里看到它：http://jsfiddle.net/buRq7/8/

$( “EX-F”.)I检查().

有人有同样的问题吗？

谢谢

我的代码是：

/*!
 * iCheck v1.0.1,http://git.io/arlzeA
 * =================================
 * Powerful jQuery and Zepto plugin for checkBoxes and radio buttons customization
 *
 * (c) 2013 Damir Sultanov,http://fronteed.com
 * MIT Licensed
 */

(function($) {

  // Cached vars
  var _iCheck = 'iCheck',_iCheckHelper = _iCheck + '-helper',_checkBox = 'checkBox',_radio = 'radio',_checked = 'checked',_unchecked = 'un' + _checked,_disabled = 'disabled',_determinate = 'determinate',_indeterminate = 'in' + _determinate,_update = 'update',_type = 'type',_click = 'click',_touch = 'touchbegin.i touchend.i',_add = 'addClass',_remove = 'removeClass',_callback = 'trigger',_label = 'label',_cursor = 'cursor',_mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent);

  // Plugin init
  $.fn[_iCheck] = function(options,fire) {

    // Walker
    var handle = 'input[type="' + _checkBox + '"],input[type="' + _radio + '"]',stack = $(),walker = function(object) {
        object.each(function() {
          var self = $(this);

          if (self.is(handle)) {
            stack = stack.add(self);
          } else {
            stack = stack.add(self.find(handle));
          };
        });
      };

    // Check if we should operate with some method
    if (/^(check|uncheck|toggle|indeterminate|determinate|disable|enable|update|destroy)$/i.test(options)) {

      // Normalize method's name
      options = options.toLowerCase();

      // Find checkBoxes and radio buttons
      walker(this);

      return stack.each(function() {
        var self = $(this);

        if (options == 'destroy') {
          tidy(self,'ifDestroyed');
        } else {
          operate(self,true,options);
        };

        // Fire method's callback
        if ($.isFunction(fire)) {
          fire();
        };
      });

    // Customization
    } else if (typeof options == 'object' || !options) {

      // Check if any options were passed
      var settings = $.extend({
          checkedClass: _checked,disabledClass: _disabled,indeterminateClass: _indeterminate,labelHover: true,aria: false
        },options),selector = settings.handle,hoverClass = settings.hoverClass || 'hover',focusClass = settings.focusClass || 'focus',activeClass = settings.activeClass || 'active',labelHover = !!settings.labelHover,labelHoverClass = settings.labelHoverClass || 'hover',// Setup clickable area
        area = ('' + settings.increaseArea).replace('%','') | 0;

      // Selector limit
      if (selector == _checkBox || selector == _radio) {
        handle = 'input[type="' + selector + '"]';
      };

      // Clickable area limit
      if (area < -50) {
        area = -50;
      };

      // Walk around the selector
      walker(this);

      return stack.each(function() {
        var self = $(this);

        // If already customized
        tidy(self);

        var node = this,id = node.id,// Layer styles
          offset = -area + '%',size = 100 + (area * 2) + '%',layer = {
            position: 'absolute',top: offset,left: offset,display: 'block',width: size,height: size,margin: 0,padding: 0,background: '#fff',border: 0,opacity: 0
          },// Choose how to hide input
          hide = _mobile ? {
            position: 'absolute',visibility: 'hidden'
          } : area ? layer : {
            position: 'absolute',// Get proper class
          className = node[_type] == _checkBox ? settings.checkBoxClass || 'i' + _checkBox : settings.radioClass || 'i' + _radio,// Find assigned labels
          label = $(_label + '[for="' + id + '"]').add(self.closest(_label)),// Check ARIA option
          aria = !!settings.aria,// Set ARIA placeholder
          ariaID = _iCheck + '-' + Math.random().toString(36).replace('0.',''),// Parent & helper
          parent = '<div class="' + className + '" ' + (aria ? 'role="' + node[_type] + '" ' : ''),helper;

        // Set ARIA "labelledby"
        if (label.length && aria) {
          label.each(function() {
            parent += 'aria-labelledby="';

            if (this.id) {
              parent += this.id;
            } else {
              this.id = ariaID;
              parent += ariaID;
            }

            parent += '"';
          });
        };

        // Wrap input
        parent = self.wrap(parent + '/>')[_callback]('ifCreated').parent().append(settings.insert);

        // Layer addition
        helper = $('<ins class="' + _iCheckHelper + '"/>').css(layer).appendTo(parent);

        // Finalize customization
        self.data(_iCheck,{o: settings,s: self.attr('style')}).css(hide);
        !!settings.inheritClass && parent[_add](node.className || '');
        !!settings.inheritID && id && parent.attr('id',_iCheck + '-' + id);
        parent.css('position') == 'static' && parent.css('position','relative');
        operate(self,_update);

        // Label events
        if (label.length) {
          label.on(_click + '.i mouSEOver.i mouSEOut.i ' + _touch,function(event) {
            var type = event[_type],item = $(this);

            // Do nothing if input is disabled
            if (!node[_disabled]) {

              // Click
              if (type == _click) {
                if ($(event.target).is('a')) {
                  return;
                }
                operate(self,false,true);

              // Hover state
              } else if (labelHover) {

                // mouSEOut|touchend
                if (/ut|nd/.test(type)) {
                  parent[_remove](hoverClass);
                  item[_remove](labelHoverClass);
                } else {
                  parent[_add](hoverClass);
                  item[_add](labelHoverClass);
                };
              };

              if (_mobile) {
                event.stopPropagation();
              } else {
                return false;
              };
            };
          });
        };

        // Input events
        self.on(_click + '.i focus.i blur.i keyup.i keydown.i keypress.i',function(event) {
          var type = event[_type],key = event.keyCode;

          // Click
          if (type == _click) {
            return false;

          // Keydown
          } else if (type == 'keydown' && key == 32) {
            if (!(node[_type] == _radio && node[_checked])) {
              if (node[_checked]) {
                off(self,_checked);
              } else {
                on(self,_checked);
              };
            };

            return false;

          // Keyup
          } else if (type == 'keyup' && node[_type] == _radio) {
            !node[_checked] && on(self,_checked);

          // Focus/blur
          } else if (/us|ur/.test(type)) {
            parent[type == 'blur' ? _remove : _add](focusClass);
          };
        });

        // Helper events
        helper.on(_click + ' mousedown mouseup mouSEOver mouSEOut ' + _touch,// mousedown|mouseup
            toggle = /wn|up/.test(type) ? activeClass : hoverClass;

          // Do nothing if input is disabled
          if (!node[_disabled]) {

            // Click
            if (type == _click) {
              operate(self,true);

            // Active and hover states
            } else {

              // State is on
              if (/wn|er|in/.test(type)) {

                // mousedown|mouSEOver|touchbegin
                parent[_add](toggle);

              // State is off
              } else {
                parent[_remove](toggle + ' ' + activeClass);
              };

              // Label hover
              if (label.length && labelHover && toggle == hoverClass) {

                // mouSEOut|touchend
                label[/ut|nd/.test(type) ? _remove : _add](labelHoverClass);
              };
            };

            if (_mobile) {
              event.stopPropagation();
            } else {
              return false;
            };
          };
        });
      });
    } else {
      return this;
    };
  };

  // Do something with inputs
  function operate(input,direct,method) {
    var node = input[0],state = /er/.test(method) ? _indeterminate : /bl/.test(method) ? _disabled : _checked,active = method == _update ? {
        checked: node[_checked],disabled: node[_disabled],indeterminate: input.attr(_indeterminate) == 'true' || input.attr(_determinate) == 'false'
      } : node[state];

    // Check,disable or indeterminate
    if (/^(ch|di|in)/.test(method) && !active) {
      on(input,state);

    // Uncheck,enable or determinate
    } else if (/^(un|en|de)/.test(method) && active) {
      off(input,state);

    // Update
    } else if (method == _update) {

      // Handle states
      for (var state in active) {
        if (active[state]) {
          on(input,state,true);
        } else {
          off(input,true);
        };
      };

    } else if (!direct || method == 'toggle') {

      // Helper or label was clicked
      if (!direct) {
        input[_callback]('ifClicked');
      };

      // Toggle checked state
      if (active) {
        if (node[_type] !== _radio) {
          off(input,state);
        };
      } else {
        on(input,state);
      };
    };
  };

  // Add checked,disabled or indeterminate state
  function on(input,keep) {
    var node = input[0],parent = input.parent(),checked = state == _checked,indeterminate = state == _indeterminate,disabled = state == _disabled,callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled',regular = option(input,callback + capitalize(node[_type])),specific = option(input,state + capitalize(node[_type]));

    // Prevent unnecessary actions
    if (node[state] !== true) {

      // Toggle assigned radio buttons
      if (!keep && state == _checked && node[_type] == _radio && node.name) {
        var form = input.closest('form'),inputs = 'input[name="' + node.name + '"]';

        inputs = form.length ? form.find(inputs) : $(inputs);

        inputs.each(function() {
          if (this !== node && $(this).data(_iCheck)) {
            off($(this),state);
          };
        });
      };

      // Indeterminate state
      if (indeterminate) {

        // Add indeterminate state
        node[state] = true;

        // Remove checked state
        if (node[_checked]) {
          off(input,_checked,'force');
        };

      // Checked or disabled state
      } else {

        // Add checked or disabled state
        if (!keep) {
          node[state] = true;
        };

        // Remove indeterminate state
        if (checked && node[_indeterminate]) {
          off(input,_indeterminate,false);
        };
      };

      // Trigger callbacks
      callbacks(input,checked,keep);
    };

    // Add proper cursor
    if (node[_disabled] && !!option(input,_cursor,true)) {
      parent.find('.' + _iCheckHelper).css(_cursor,'default');
    };

    // Add state class
    parent[_add](specific || option(input,state) || '');

    // Set ARIA attribute
    disabled ? parent.attr('aria-disabled','true') : parent.attr('aria-checked',indeterminate ? 'mixed' : 'true');

    // Remove regular state class
    parent[_remove](regular || option(input,callback) || '');
  };

  // Remove checked,disabled or indeterminate state
  function off(input,state + capitalize(node[_type]));

    // Prevent unnecessary actions
    if (node[state] !== false) {

      // Toggle state
      if (indeterminate || !keep || keep == 'force') {
        node[state] = false;
      };

      // Trigger callbacks
      callbacks(input,callback,keep);
    };

    // Add proper cursor
    if (!node[_disabled] && !!option(input,'pointer');
    };

    // Remove state class
    parent[_remove](specific || option(input,'false') : parent.attr('aria-checked','false');

    // Add regular state class
    parent[_add](regular || option(input,callback) || '');
  };

  // Remove all traces
  function tidy(input,callback) {
    if (input.data(_iCheck)) {

      // Remove everything except input
      input.parent().html(input.attr('style',input.data(_iCheck).s || ''));

      // Callback
      if (callback) {
        input[_callback](callback);
      };

      // Unbind events
      input.off('.i').unwrap();
      $(_label + '[for="' + input[0].id + '"]').add(input.closest(_label)).off('.i');
    };
  };

  // Get some option
  function option(input,regular) {
    if (input.data(_iCheck)) {
      return input.data(_iCheck).o[state + (regular ? '' : 'Class')];
    };
  };

  // Capitalize some string
  function capitalize(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
  };

  // Executable handlers
  function callbacks(input,keep) {
    if (!keep) {
      if (checked) {
        input[_callback]('ifToggled');
      };

      input[_callback]('ifChanged')[_callback]('if' + capitalize(callback));
    };
  };
})(window.jQuery || window.Zepto);

$(".ex-f").iCheck();

和

<div class="my-checkBox">
    <input class="ex-f" id="Finish" name="Finish" type="checkBox" value="1"> doesn't work
</div>

和

.my-checkBox {
    border: 1px solid blue;
    height: 20px;
}
.ex-f {
    border: 1px solid red;
}