JSFiddle - React, Tailwind, and code Playground

by Park Mino

HTML

<div id="formBox">
				<form action="">
					<fieldset>
					<legend>치맥은</legend>
						<ul class="checkBox_list" id="checkBox01">
							<li>
								<label><input type="radio" class="check" id="check_01_01" checked="" /> 후라이드는 기본임</label>
							</li>
							<li>
								<label><input type="radio" class="check" id="check_01_02" checked="" /> 진리의 스파이스</label>
							</li>
							<li>
								<label><input type="radio" class="check" id="check_01_03" checked="" /> 마늘!!!</label>
							</li>
							<li>
								<label><input type="radio" class="check" id="check_01_04" checked="" /> 신매뉴 치즈 모름</label>
							</li>
						</ul>
					</fieldset>

					<fieldset>
					<legend>맥주는</legend>
						<ul class="checkBox_list check02" id="checkBox02">
							<li>
								<label><input type="radio" class="check" id="check_02_01" /> 하이트 or D</label>
							</li>
							<li>
								<label><input type="radio" class="check" id="check_02_02" /> 카스</label>
							</li>
							<li>
								<label><input type="radio" class="check" id="check_02_03" /> 버드, 하이, 호가든류 서양맥주</label>
							</li>
							<li>
								<label><input type="radio" class="check" id="check_02_04" /> 아사히, 기린, 칭따오 동양맥주</label>
							</li>
						</ul>
					</fieldset>

					<fieldset>
					<legend>소주안주는</legend>
						<ul class="checkBox_list check03" id="checkBox03">
							<li>
								<label><input type="radio" class="check" id="check_03_01" /> 조개구이 & 찜~♡</label>
							</li>
							<li>
								<label><input type="radio" class="check" id="check_03_02" /> 짬뽕해물탕류</label>
							</li>
							<li>
								<label><input type="radio" class="check" id="check_03_03" /> 삼겹살! 차돌!</label>
							</li>
							<li>
								<label><input type="radio" class="check" id="check_03_04" /> ...쓰고도 고를수가 업다;;;</label>
							</li>
						</ul>
					</fieldset>

					<fieldset>
					<legend>장소는</legend>
						<ul class="checkBox_list check04" id="checkBox04">
							<li>
								<label><input type="radio" class="check" id="check_04_01" />...

CSS

legend{font-size:14px;padding:10px 0;}
.checkBox_list{display:table;width:100%;}
.checkBox_list li{position:relative;display:table-cell;line-height:25px;}
.checkBox_list label{}
.checkBox_list label span{display:inline-block;height:28px;padding:0 0 0 29px;background:url("http://aoiyuki4u.cafe24.com/study/1407/images/set_chk.png") no-repeat 0 0;background-size:158.5px 69px;}
.checkBox_list label.on span{background-position:0 -41px;}
.checkBox_list label input{position:absolute;top:0px;left:0px;visibility:hidden;}

.check02 label span{background-position:-41px 0}
.check02 label.on span{background-position:-41px -42px;}
.check03 label span{background-position:-88px 0}
.check03 label.on span{background-position:-88px -42px;}
.check04 label span{background-position:-132px 0}
.check04 label.on span{background-position:-132px -42px;}

JavaScript

$(function(){
	$(".checkBox_list > li > label").prepend("<span>&nbsp;</span>");
	$(".checkBox_list > li > label").click(function(e){
	e.preventDefault();
		var $checkBoxList = $(this).parents(".checkBox_list").eq(0);
		var $labels = $checkBoxList.find("label");
		var $checkboxes = $checkBoxList.find("input");

		$labels.removeClass("on");
		$checkboxes.removeAttr("checked");

		$(this).addClass("on");
		//$(this).find('input')[0].checked = true;
		$(this).find('input').attr("checked", "true");
	});
});