[스크랩] 접근성고려한 체크박스 및 라디오버튼

*기본적으로 라디오는 좌우 화살표방향키로, 체크박스는 탭키와 스페이스바로 이동한다.

input[type=radio] + label ,
input[type=checkbox] + label {display:inline-block;line-height:0;vertical-align:middle}
input[type=radio],
input[type=checkbox] {border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
input[type=radio] + label {position:relative;display:inline-block;padding:0 35px 0 30px;min-height:20px;line-height:19px;background:url("http://image.uplus.co.kr/images/renewal/images/cm/pc/radio.png") no-repeat;cursor:pointer;color:#666}
input[type=radio]:focus + label {background:url("http://image.uplus.co.kr/images/renewal/images/cm/pc/radio_on_.png") no-repeat}
input[type=radio] + label.on {background:url("http://image.uplus.co.kr/images/renewal/images/cm/pc/radio_on.png") no-repeat}
input[type=radio]:checked  + label {background:url("http://image.uplus.co.kr/images/renewal/images/cm/pc/radio_on.png") no-repeat}
input[type=radio]:focus + label.on {background:url("http://image.uplus.co.kr/images/renewal/images/cm/pc/radio_on_.png") no-repeat}
input[type=radio] + label.disable,
input[type=radio]:disabled + label {background:url("//image.uplus.co.kr/images/renewal/images/cm/pc/radio_off.png") no-repeat}
input[type=radio] + label.disable,
input[type=radio]:disabled + label.disableOn {background:url("http://image.uplus.co.kr/images/renewal/images/cm/pc/radio_on.png") no-repeat}

input[type=checkbox] + label {position:relative;display:inline-block;padding:0 35px 0 30px;min-height:20px;line-height:19px;background:url("http://image.uplus.co.kr/images/renewal/images/cm/pc/check.png") no-repeat;cursor:pointer}
input[type=checkbox]:focus + label {background:url("http://image.uplus.co.kr/images/renewal/images/cm/pc/check_.png") no-repeat}
input[type=checkbox] + label.on {background:url("http://image.uplus.co.kr/images/renewal/images/cm/pc/check_on.png") no-repeat}
input[type=checkbox]:checked  + label {background:url("http://image.uplus.co.kr/images/renewal/images/cm/pc/check_on.png") no-repeat}
input[type=checkbox]:focus + label.on {background:url("http://image.uplus.co.kr/images/renewal/images/cm/pc/check_on_.png") no-repeat}
input[type=checkbox] + label.disable {background:url("http://image.uplus.co.kr/images/renewal/images/cm/pc/check_off.png") no-repeat}
input[type=checkbox]:disabled + label {background:url("http://image.uplus.co.kr/images/renewal/images/cm/pc/check_off.png") no-repeat;cursor:default}

var ui = {
	checkLabel : function() {
		$(document).on('click', 'input:checkbox, input:radio', function (e) {
			$inp = $(this);
			if($inp.next().is("label")) {
				var name = $inp.attr("name");
				//only for radio
				if($inp.attr("type") == "radio") {
                    $("input:radio[name=" + name + "]").each(function() {
                    	$(this).next().removeClass('on');
                    });
				}
				//both checkbox and radio
				if(name) {
                    $("input[name=" + name + "]").each(function(index) {
                    	if($(this).is(":checked")) {
                    		$(this).next().addClass('on');
                    	} else {
                    		$(this).next().removeClass('on');
                    	}
                    });
				} else {
					//if name is not specified
                	if($inp.is(":checked")) {
                		$inp.next().addClass('on');
                	} else {
                		$inp.next().removeClass('on');
                	}
				}
                //check/uncheck all checkboxes
				var $wrap = $inp.parent();
				if($wrap.hasClass("otherCheck")) {
					$wrap = $wrap.parent();
				}
				if($wrap.find("input:checkbox[name=allCheck]").size() == 1) {
					if(name == "allCheck") {
						if($inp.is(":checked")) {
							$wrap.find("input[name!=allCheck]:checkbox").each(function() {
								$(this).prop("checked", true);
								$(this).next().addClass("on");
							});
						} else {
							$wrap.find("input:checkbox").each(function() {
								$(this).prop("checked", false);
								$(this).next().removeClass("on");
							});
						}
					} else {
						var cnt1 = $wrap.find("input[name!=allCheck]").size();
						var cnt2 = $wrap.find("input[name!=allCheck]:checked").size();
						if(cnt1 == cnt2) {
							$wrap.find("input[name=allCheck]").prop("checked", true);
							$wrap.find("input[name=allCheck]").next().addClass("on");
						} else {
							$wrap.find("input[name=allCheck]").prop("checked", false);
							$wrap.find("input[name=allCheck]").next().removeClass("on");
						}
					}
				}
			}
		});

		$(document).on('change', 'input:radio', function (e) {
			var $this = $(this);
            if( $this.prop('checked') ){
            	$thisId = $this.attr('id');
            	$thisGroup = $this.attr('name');
            	$("input[name="+$thisGroup+"]").siblings('label').removeClass('on');
            	$this.siblings('label').each(function(){
					if($(this).attr('for') == $thisId){
						$(this).addClass('on');
					}
				});
            } else {
                $this.next('label').removeClass('on');
            }
        }).change();
		if($('input[type=checkbox], input[type=radio]').length){
    		$('input[type=checkbox], input[type=radio]').each(function(){
    			if($(this).attr('checked') == 'checked'){
    				var selObjName = $(this).attr('id');
    				$('label').each(function(){
    					if($(this).attr('for') == selObjName){
    						$(this).addClass('on');
    					}
    				});
    			}
    		});
    	}

	}
}

$(function(){
	ui.checkLabel();
})

결과보기 : https://codepen.io/zoo79/pen/wxNdjv

wxNdjv

출처 : https://zoo79.tistory.com/10?category=297518

접근성고려한 체크박스 및 라디오버튼