커스텀 체크박스(designed checkbox ) - 체크박스 이미지(디자인)

체크박스를 이미지로 사용하기

체크박스에 이미지를 사용하는 방법에 대해 알아봅니다.

기본 패턴의 체크박스

See the Pen Basic checkbox jQuery by jaeheekim (@jaehee) on CodePen.

프로토타입 방식의 체크박스

/**
  * -----------------------------------
  * Designed input[type=checkbox]
  * -----------------------------------
  */
(function(global, $) {
  $(makeCheckbox);

  function makeCheckbox() {
    var checkbox = CustomCheckbox();
    checkbox.init('.ctm-check');
  }

  function CustomCheckbox() {
    if (this === window) return new CustomCheckbox;

    this.checkbox = null;
    this.prop_check = null;
  }

  CustomCheckbox.prototype = {

    'init': function(chkClass) {
      this.checkbox = $(chkClass);
      this.prop_check = 'checked';
      this.initEvent();
    },

    'initEvent': function() {
      this.checkboxChange();
    },

    'checkboxChange': function() {
      var _self = this;
      this.checkbox.on('change', 'input', function() {
        _self.addClassCheckbox(this);
      })
    },

    'addClassCheckbox': function(inputCheckbox) {
      var $inputCheckbox = $(inputCheckbox);

      $inputCheckbox.prop(this.prop_check) ?
        $inputCheckbox.parent().addClass(this.prop_check) :
        $inputCheckbox.parent().removeClass(this.prop_check)

    }
  }

})(window, window.jQuery);

See the Pen custom checkbox by jaeheekim (@jaehee) on CodePen.

Jaehee's WebClub