미리보기

체크 박스와 라디오 버튼을 클릭 해보세요.

선택 됐을때의 색상, 폰트크기는 원하는데로 수정하시면 됩니다.

html

/* checkbox */
<input type="checkbox" name="_check" id="_check1" class="id_check"><label for="_check1" class="type-checkbox">체크1</label>
<input type="checkbox" name="_check" id="_check2" class="id_check"><label for="_check2" class="type-checkbox">체크2</label>
<input type="checkbox" name="_check" id="_check3" class="id_check" disabled="disabled"><label for="_check3" class="type-checkbox disabled">체크(선택불가)</label>

/* radio */
<input type="radio" name="_radio" id="_radio1" class="id_radio"><label for="_radio1" class="type-radio">라디오1</label>
<input type="radio" name="_radio" id="_radio2" class="id_radio"><label for="_radio2" class="type-radio">라디오2</label>
<input type="radio" name="_radio" id="_radio3" class="id_radio" disabled="disabled"><label for="_radio3" class="type-radio disabled">라디오(선택불가)</label>

input에 class명과 label의 class명을 정확히 작성해 주셔야 합니다. 변경시 스크립트도 수정을 해줘야 합니다.

css

/* checkbox */
input.id_check{position:absolute;left:-3000em}
label.type-checkbox{display:inline-block;height:20px;margin-right:7px;padding-left:27px;font-size:13px;color:#666;vertical-align:middle;background:url(/images/study/jquery/img_checkbox_radio/img_checkbox.png) no-repeat;line-height:20px}
label.type-checkbox.checked{background:url(/images/study/jquery/img_checkbox_radio/img_checkbox_checked.png) no-repeat}
label.type-checkbox.disabled{background:url(/images/study/jquery/img_checkbox_radio/img_checkbox_disabled.png) no-repeat}

/* radio */
input.id_radio{position:absolute;left:-3000em}
label.type-radio{display:inline-block;height:20px;margin-right:7px;padding-left:27px;font-size:13px;color:#666;vertical-align:middle;background:url(/images/study/jquery/img_checkbox_radio/img_radio.png) no-repeat;line-height:20px}
label.type-radio.checked{background:url(/images/study/jquery/img_checkbox_radio/img_radio_checked.png) no-repeat}
label.type-radio.disabled{background:url(/images/study/jquery/img_checkbox_radio/img_radio_disabled.png) no-repeat}

script

$(document).ready(function(){
	$.fn.customizeCRInput = function(options) {
		var options = $.extend({
			checked_class : "checked"
		}, options);
		return this.each(function(){
			var input = $(this);
			input.on("change",function(){
				var is_checked = input.is(":checked");
				var type = input.attr("type");
				var id = input.attr("id");
				var label = $("label[for="+id+"]");
				if (type == "checkbox") {
					if (input.is(":checked")) {
						label.addClass(options.checked_class);
					} else {
						label.removeClass(options.checked_class);
					}
				} else if (type == "radio") {
					$("input[name="+input.attr("name")+"]").each(function(idx){
						$("label[for="+$(this).attr("id")+"]").removeClass(options.checked_class);
					});
					label.addClass(options.checked_class);
				}
			});
		});
	};
	$("input[type=checkbox].id_check").customizeCRInput(); // 체크박스 실행 스크립트
	$("input[type=radio].id_radio").customizeCRInput(); // 라디오 버튼 실행 스크립트
});