[jQuery] radio, checkbox 디자인 하기

radio나 checkbox 인풋 디자인은 여간 까다로운게 아니다.

아래 예제는 radio, checkbox 를 감싸고 있는 label에 Class를 부여하여
보다 간단한 방법으로 인풋 디자인이 가능하게 해준다.

javascript

//checkbox
labelDesign = {
	'init' : function(){
		this.action();
	},
	'action' : function(){
		var $ele = {
			'inp' : $('label.chk :checkbox, label.chk :radio'),
		}
		var is_checked = function($this){
			var chked = $this.is(':checked');
			var rdo_name = $this.attr('name');
			var this_type = $this.attr('type');

			if(chked){
				if(this_type=='radio'){
					$this.parents('label').addClass('on').siblings($this.parent()).removeClass('on');
				}else{
					$this.parents('label').addClass('on');
				}
			}else{
				$this.parents('label').removeClass('on');
			}
		}
		$ele.inp.on({
			'click' : function(){
				is_checked($(this));
			}
		})
		$(window).on({
			'load' : function(){
				$ele.inp.each(function(){
					is_checked($(this));
				})
			}
		})
	}
}

HTML

<label class="chk"><input type="checkbox" /></label>