Like Select2 ... for radios and checkboxes

Radio2_Check2.js

(function ($, window, undefined) {
    $.fn.extend({
        check2: function(option){
            option = option || 'create';

            var conf = {
                check2Class: 'check2',
                offscreenClass: 'offscreen',
                fontSize: '1.2em'
            };
            conf.hasCheck2Class = 'has'+conf.check2Class.charAt(0).toUpperCase() + conf.check2Class.substr(1);

            var _fn = {
                configure: function(checkInput, check2){  
                    checkInput = $(checkInput);
                    check2 = $(check2);  

                    var bindClass = _fn.bindClass();
                    var changeClass = _fn.bindClass('change');

                    check2.unbind(bindClass);
                    checkInput.unbind(changeClass);

                    check2.bind(bindClass, function(){                        
                        var $this = $(this);
                        $this.toggleClass('icon-check-empty').toggleClass('icon-check');
                        $this.prev().trigger('click');
                    }) 

                    checkInput.bind(changeClass, function(){
                        var $this = $(this);
                        
                        if($this.is(':checked') && check2.hasClass('icon-check-empty'))
                            check2.removeClass('icon-check-empty').addClass('icon-check');                      
                        else if(!$this.is(':checked') && check2.hasClass('icon-check'))
                            check2.addClass('icon-check-empty').removeClass('icon-check');
                    })  
                },
                bindClass: function(fn){
                    if(!fn) fn = (AF && AF.plugins && AF.plugins.Device) ? AF.plugins.Device.click() : 'click';
                    return fn+'.'+conf.check2Class;
                },
                unbind: function(checkInput){
                    checkInput = $(checkInput);
                    var bindClass = _fn.bindClass();
                    var changeClass =  _fn.bindClass('change');
                    checkInput.next().unbind(bindClass);  
                    checkInput.unbind(changeClass); 
                }
            }
            var fn = {
                create: function(checkInput){
                    checkInput = $(checkInput);
                    if(checkInput.next().hasClass(conf.check2Class)) return false;

                    var check2 = $('<i/>');
                    var input_classes = $(checkInput).attr('class');
                    check2.css('fontSize', conf.fontSize).addClass(conf.check2Class).addClass(input_classes);

                    if(checkInput.is(':checked'))
                        check2.addClass('icon-check');
                    else check2.addClass('icon-check-empty');

                    _fn.configure(checkInput, check2);
                    checkInput.addClass(conf.offscreenClass).addClass(conf.hasCheck2Class);
                    checkInput.after(check2);
                    return check2;
                },
                destroy: function(checkInput){
                    checkInput = $(checkInput);
                    if(!checkInput.next().hasClass(conf.check2Class)) return false;
                    checkInput.removeClass(conf.offscreenClass).removeClass(conf.hasCheck2Class);
                    _fn.unbind(checkInput);

                    checkInput.next().remove();
                },
                disable: function(checkInput){
                    checkInput = $(checkInput);
                    if(!checkInput.next().hasClass(conf.check2Class)) return false; 
                    _fn.unbind(checkInput);     
                },
                enable: function(checkInput){
                    var check2 = $(checkInput).next();
                    if(!check2.hasClass(conf.check2Class)) return fn.create(checkInput);
                    _fn.configure(checkInput, check2);                
                }
            }
            if(!fn[option]) return this;

            $(this).filter('input:checkbox').each(function(i,v){
                fn[option](v);
            })
            return this;
        },
        radio2: function(option){
            option = option || 'create';

            var conf = {
                radio2Class: 'radio2',
                offscreenClass: 'offscreen',
                fontSize: '1.2em'
            };
            conf.hasRadio2Class = 'has'+conf.radio2Class.charAt(0).toUpperCase() + conf.radio2Class.substr(1);

            var _fn = {
                configure: function(radioInput, radio2){  
                    radioInput = $(radioInput);
                    radio2 = $(radio2);  


                    var $name = radioInput.attr('name');

                    var bindClass = _fn.bindClass();
                    var changeClass = _fn.bindClass('change');

                    radio2.unbind(bindClass);
                    radioInput.unbind(changeClass);

                    radio2.bind(bindClass, function(){
                        var $this = $(this);
                        var others = $(document).find("input:radio[name='"+$name+"']").not(radioInput);
                        
                        others.each(function(i, v){
                            $(v).next().removeClass('icon-circle').addClass('icon-circle-blank');
                        });

                        $this.addClass('icon-circle').removeClass('icon-circle-blank');
                        $this.prev().trigger('click');          
                    }) 

                    radioInput.bind(changeClass, function(){
                        var $this = $(this);
                        var others = $(document).find("input:radio[name='"+$name+"']").not(radioInput);

                        others.each(function(i, v){
                            $(v).next().removeClass('icon-circle').addClass('icon-circle-blank');
                        });

                        if($this.is(':checked') && radio2.hasClass('icon-circle-blank'))
                            radio2.removeClass('icon-circle-blank').addClass('icon-circle');                         
                        else if(!$this.is(':checked') && radio2.hasClass('icon-circle'))
                            radio2.addClass('icon-circle-blank').removeClass('icon-circle');
                        
                    })  
                },
                bindClass: function(fn){
                    if(!fn) fn = (AF && AF.plugins && AF.plugins.Device) ? AF.plugins.Device.click() : 'click';
                    return fn+'.'+conf.radio2Class;
                },
                unbind: function(radioInput){
                    radioInput = $(radioInput);
                    var bindClass = _fn.bindClass();
                    var changeClass =  _fn.bindClass('change');
                    radioInput.next().unbind(bindClass);  
                    radioInput.unbind(changeClass); 
                }
            }
            
            var fn = {
                create: function(radioInput){
                    radioInput = $(radioInput);
                    if(radioInput.next().hasClass(conf.radio2Class)) return false;

                    var radio2 = $('<i/>');
                    var input_classes = $(radioInput).attr('class');
                    radio2.css('fontSize', conf.fontSize).addClass(conf.radio2Class).addClass(input_classes);

                    if(radioInput.is(':checked'))
                        radio2.addClass('icon-circle');
                    else radio2.addClass('icon-circle-blank');

                    _fn.configure(radioInput, radio2);
                    radioInput.addClass(conf.offscreenClass).addClass(conf.hasRadio2Class);
                    radioInput.after(radio2);
                    return radio2
                },
                destroy: function(radioInput){
                    radioInput = $(radioInput);
                    if(!radioInput.next().hasClass(conf.radio2Class)) return false;
                    radioInput.removeClass(conf.offscreenClass).removeClass(conf.hasRadio2Class);
                    _fn.unbind(radioInput);

                    radioInput.next().remove();
                },
                disable: function(radioInput){
                    radioInput = $(radioInput);
                    if(!radioInput.next().hasClass(conf.radio2Class)) return false; 
                    _fn.unbind(radioInput);         
                },
                enable: function(radioInput){
                    var radio2 = $(radioInput).next();
                    if(!radio2.hasClass(conf.radio2Class)) return fn.create(radioInput);
                    _fn.configure(radioInput, radio2);              
                }
            }
            if(!fn[option]) return this;

            $(this).filter('input:radio').each(function(i,v){
                fn[option](v);
            });
        }
    });
})(window.jQuery, window);