stylish checkbox

simple stylish checkbox incomaptible checkbox group checkbox that behaves like radio button

by Seungrae Lee

HTML

<h3> Demo#1 Default Action </h3>

<input type="checkbox" name="demo1chkbox1" value="1" onchange="alert('state ' + (this.checked ? 'on':'off'));" />&nbsp;click!
<input type="checkbox" name="demo1chkbox2" value="1" class="iCheckbox-hidden" />
<h3> Demo#2 Check All Example </h3>

<table border="0" cellpadding="3" cellspacing="0">
  <tr>
    <td>
      <input type="checkbox" name="chkboxForFoo" value="1" class="foo" disabled="disabled" />&nbsp;checkbox1</td>
    <td>
      <input type="checkbox" name="chkboxForFoo" value="2" class="foo" disabled="disabled" checked="checked" />&nbsp;checkbox2</td>
    <td>
      <input type="checkbox" name="chkboxForFoo" value="3" class="foo" />&nbsp;checkbox3</td>
    <td>
      <input type="checkbox" name="chkboxForFoo" value="4" class="foo" checked="checked" />&nbsp;checkbox4</td>
  </tr>
  <tr>
    <td colspan="4">
      <button name="button1" onclick="$('.foo').checkAll(true);">All check</button>
      <button name="button2" onclick="$('.foo').checkAll(false);">All clear</button>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="chkboxForBar" value="1" class="bar" disabled="disabled" />&nbsp;banana</td>
    <td>
      <input type="checkbox" name="chkboxForBar" value="2" class="bar" disabled="disabled" checked="checked" />&nbsp;apple</td>
    <td>
      <input type="checkbox" name="chkboxForBar" value="3" class="bar" />&nbsp;strawberry</td>
    <td>
      <input type="checkbox" name="chkboxForBar" value="4" class="bar" />&nbsp;mango</td>
  </tr>
  <tr>
    <td colspan="4">
      <input type="checkbox" name="toggleCheck" onchange="$('.bar').checkAll(this.checked);" />&nbsp;Check All</td>
  </tr>
</table>

<h3> Demo#3.incompatible checkbox group </h3>

<table border="0" cellpadding="3" cellspacing="0">
  <tr>
    <td>Good</td>
    <td>Bad</td>
    <td>Action#</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="chkboxForBaz" value="1" class="baz" />
    </td>
    <td>
      <input type="checkbox"...

CSS

.iCheckbox-hidden {
  display: none;
}

.iCheckbox-wrapper {
  display: inline-block;
}

.iCheckbox-default {
  background: transparent url("http://ria-web.info/lib/exe/fetch.php?media=study:default.png") no-repeat;
  background-position: 0px -40px;
  border: 0;
  height: 15px;
  width: 15px;
  display: block;
}

.iCheckbox-default.disabled {
  background-position: 0px -2px;
  cursor: default;
}

.iCheckbox-default.checked {
  background-position: 0px -59px;
}

.iCheckbox-default.disabled-checked {
  background-position: 0px -21px;
  cursor: default;
}

JavaScript

/*!
 * jQuery icheckbox plugin
 * version: 1.1.6-2016.06.21
 * Released under the MIT license
 */
(function(factory) {
  if (typeof define === "function" && define.amd) {
    // AMD. Register as an anonymous module.
    define(["jquery"], factory);
  } else {
    // Browser globals
    factory(jQuery);
  }
}(function($) {

  $.extend($.fn, {
    icheckbox: function(options) {
      return this.not('.' + $.icheckbox.css.HIDDEN).each(function() {
        return new $.icheckbox(options, this);
      });
    },
    checkAll: function(mode) {
      $(this).trigger('check', mode);
    }
  });
  // constructor
  $.icheckbox = function(options, target) {
    // merge options
    this.o = $.extend(true, {}, $.icheckbox.defaults, options);
    this.target = target;
    this.init();
  };
  // implementation
  $.extend($.icheckbox, {
    version: '1.1.6',
    css: {
      CHECKED: 'checked',
      DISABLED: 'disabled',
      DISABLED_CHECKED: 'disabled-checked',
      HIDDEN: 'iCheckbox-hidden',
      WRAPPER: 'iCheckbox-wrapper'
    },
    defaults: {
      theme: 'iCheckbox-default'
    },
    prototype: {
      init: function() {
        this._create($(this.target));
      },
      _create: function(data) {
        var self = this,
          options = self.o,
          checked = data.prop('checked'),
          disabled = data.prop('disabled'),
          wrapper = $('<span></span>')
          .addClass($.icheckbox.css.WRAPPER),
          checkbox = (self.checkbox = $('<a href="#"></a>'))
          .addClass(options.theme)
          .addClass(function() {
            if (disabled) {
              return checked ? $.icheckbox.css.DISABLED_CHECKED : $.icheckbox.css.DISABLED;
            } else {
              return checked ? $.icheckbox.css.CHECKED : '';
            } //if~else
          }).on('click change', function() {
            if (!disabled) {
              $(this).toggleClass($.icheckbox.css.CHECKED);
              data.trigger('click').trigger('change');
           ...