커스텀 라디오 버튼 - Designed radio button(custom radio)

커스텀 라디오 버튼 만들기

Basic Radio Button Type - jQuery

See the Pen 커스텀 기본 라디오 버튼 #1 by jaeheekim (@jaehee) on CodePen.

생성자 함수 방식의 라디오 버튼

See the Pen 생성자 함수 방식의 라디오버튼 by jaeheekim (@jaehee) on CodePen.

프로토타입 방식 패턴 코드 

HTML 마크업은 위와 동일합니다.

javascript

/**
 *---------------------------------
 * custom radio button
 * --------------------------------
 */
(function(global, $){

    $(runRadio);

    function runRadio() {
        var radio = RadioCustom();
        radio.init('.ctm-radio');

    }
    // CLASS RadioCustom Definition
    function RadioCustom() {

        if(this === window) return new RadioCustom;

        // Element definition
        this.$radioBox = null;
        this.chk = null;

    }
    // RadioCustom 초기화
    RadioCustom.prototype.init = function (el) {

        this.$radioBox = $(el);
        this.chk = 'checked';
        this.initEvent();

    };
    // RadioCustom Call Event
    RadioCustom.prototype.initEvent = function () {
        var objThis = this;
        this.$radioBox.on('change', 'input', function () {
            objThis.addClassRadio(this);
        })
    };
    // RadioCustom class toggle
    RadioCustom.prototype.addClassRadio = function (ipt) {
        var $input = $(ipt),
                _self = this;
        $.each($input, function (index, el) {
            var _$this = $input.eq(index);
            if (_$this.prop('checked')) {
                if (_$this.parent().hasClass('ctm-radio')){
                    var radioName = _$this.attr('name');
                    $('input[name='+radioName+']').parent('.ctm-radio').removeClass(_self.chk);
                }
                _$this.parent().addClass(_self.chk).siblings().removeClass(_self.chk);
            }
        })
    };

})(window, window.jQuery);

프로토타입 클래스 방식의 라디오 버튼

위의 소스를 리팩토링한 결과물입니다.

(function (global, $) {

        $(runRadio);

        function runRadio() {
            var radioObj = CustomRadio();
        }

        function CustomRadio(el) {
            if(this === window) return new CustomRadio(el);

            this.defaultClass = null;
            this.$radioBox    = null;
            this.chk          = null;
            this.classCheck   = null;
            this.init(el);
        }

        CustomRadio.prototype = {

            'init': function (el) {
                this.defaultClass = el || '.ctm-radio';
                this.classCheck   = this.defaultClass.split('.')[1];
                this.$radioBox    = $(this.defaultClass);
                this.chk          = 'checked';
                this.initEvent();
            },

            'initEvent' : function () {
                var _self = this;
                this.$radioBox.on('change', 'input', function () {
                    _self.addClassRadio(this);
                })
            },

            'addClassRadio' : function (ipt) {
                var $input = $(ipt),
                    _self  = this;
                if ($input.prop('checked')) $input.parent().addClass(_self.chk);

               this.removeClassRadio($input);
            },

            'removeClassRadio' : function (ipt) {
                var $siblings = ipt.parent().siblings(),
                    _self     = this;
                $.each($siblings, function (idx, item) {
                    var _$siblings = $siblings.eq(idx);
                    if(_$siblings.hasClass(_self.chk)) _$siblings.removeClass(_self.chk);
                });
            }
        };

    })(window, window.jQuery);

See the Pen designed radio-button by jaeheekim (@jaehee) on CodePen.

Jaehee's WebClub