jQuery Checkbox Style Plugin

Checkbox Styling

How to use:
===========

The only thing you need is the line below!

The plugin Grabs all Tags:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<input type="checkbox" />
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Then you need to add this to your javascript
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$('#container').checkbox();
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You need to change the listener **"#container"** to any Tag or ID or Class.
The Plugin looks in this contianer for all checkboxes and manage the styling.

checkbox-font.js

/*
 * Version for Bootstrap icons.
 * You need to change the classes
 */
(function($){

	var checkBox = $.checkbox = function(){
		checkBox.init;
	};

	$.extend( checkBox, {
		pluginName: 'checkBox',
		version : '0.3b',
		defaults : {
				$this: this,
				option: true,
				arrows: false
			},
		opts : {},
		eventHolder : function( ){
			$('.checkBox').on({
				'click': function( e ){
                    e.preventDefault();
					if( $(this).hasClass('icon-check') ){
						$(this).removeClass('icon-check');
						$(this).addClass('icon-check-empty');
						$(this).find('input').attr('checked', false);
                        if( $(this).find('input').data('check-parent') != '' ){
                            var check = $(this).find('input').data('check-parent');
                            $(this).parents( check+':first').removeClass('checked');
                        }
					}else{
						$(this).addClass('icon-check');
						$(this).removeClass('icon-check-empty');
						$(this).find('input').attr('checked', true);
                        if( $(this).find('input').data('check-parent') != '' ){
                            var check = $(this).find('input').data('check-parent');
                            $(this).parents( check+':first').addClass('checked');
                        }
					}
				}
			});
		},
		init : function( $this, opts ){
			opts = $.extend(true, {}, checkBox.defaults, opts);

			$this.find('input[type="checkbox"]').each(function(){
				if( $(this).prop('checked') ){
					$(this).wrap('<i class="checkBox icon-check"></div>');
				}else{
					$(this).wrap('<i class="checkBox icon-check-empty"></div>');
				}
			});

			checkBox.eventHolder();
		}

	} );

	$.fn.checkbox = function( options ){
		var $this = $(this);
		options = options || {};
		checkBox.init( $this );
		return this;
	};

})(jQuery);

checkbox.css

/*
 * Checkbox Standard Style
 */
.checkBox{
	background: #d8f2d8;
	border: 1px solid #ace2ac;
	position: relative;
	cursor: pointer;
	display: block;
	width: 12px;
	height: 12px;
	float: left;
	margin-right: 10px;
}
.checkBox input{
	display: none;
}
.checkBox.checked span{
	background:  #fc0;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
}

checkbox.js

(function($){

	var checkBox = $.checkbox = function(){
		checkBox.init;
	};

	$.extend( checkBox, {
		pluginName: 'checkBox',
		version : '0.2b',
		defaults : {
				$this: this,
				option: true,
				arrows: false
			},
		opts : {},
		eventHolder : function( ){
			$('.checkBox').on({
				'click': function(){
					if( $(this).hasClass('checked') ){
						$(this).removeClass('checked');
						$(this).find('input').attr('checked', false);
					}else{
						$(this).addClass('checked');
						$(this).find('input').attr('checked', true);
					}
				}
			});
		},
		init : function( $this, opts ){
			opts = $.extend(true, {}, checkBox.defaults, opts);

			$this.find('input[type="checkbox"]').each(function(){
				if( $(this).prop('checked') ){
					$(this).wrap('<div class="checkBox checked"><span></span></div>');
				}else{
					$(this).wrap('<div class="checkBox"><span></span></div>');
				}
			});

			checkBox.eventHolder();
		}

	} );

	$.fn.checkbox = function( options ){
		var $this = $(this);
		options = options || {};
		checkBox.init( $this );
		return this;
	};

})(jQuery);