[jQuery] 라디오박스 이미지

이벤트 페이지를 많이 치다보니 좀 쓰게 되네...
정리정리...

<style type="text/css">
.eventWrap .choice{}
.eventWrap .choice .radioBox_list{overflow:hidden;width:100%;}
.eventWrap .choice .radioBox_list li{float:left;position:relative;padding:0 0 0 0;width:110px;text-align:left;}
.eventWrap .choice .radioBox_list li label{overflow:hidden;cursor:pointer;line-height:20px;font-size:18px;color:#333;letter-spacing:-1px;}
.eventWrap .choice .radioBox_list li label span{float:left;height:20px;margin-top:0;padding:0 0 0 20px;background:url("./images/radio.png") no-repeat 0 center;}
.eventWrap .choice .radioBox_list li label.on span{background:url("./images/radio_on.png") no-repeat 0 center;}
.eventWrap .choice .radioBox_list li label input{position:absolute;top:0px;left:0px;visibility:hidden;}
</style>


<script type="text/javascript">
$(document).ready(function() {
$(".radioBox_list > li > label").prepend("<span>&nbsp;</span>");
$(".radioBox_list > li > label").click(function(e){
e.preventDefault();
var $radioBoxList = $(this).parents(".radioBox_list").eq(0);
var $labels = $radioBoxList.find("label");
var $radioBoxes = $radioBoxList.find("input");

if($(this).parents("li").hasClass("off")){
alert(0)
} else {
$labels.removeClass("on");
$radioBoxes.prop("checked", "false");

$(this).addClass("on");
$(this).find('input').prop("checked", "true");
}
});
});
</script>

<div class="choice">
<ul class="radioBox_list" id="radioBox01">
<li><label><input type="radio" class="radio" id="radio_01_01" name="radio_01" checked="" /> 1개</label></li>
<li><label><input type="radio" class="radio" id="radio_01_02" name="radio_01" checked="" /> 2개</label></li>
<li><label><input type="radio" class="radio" id="radio_01_03" name="radio_01" checked="" /> 3개</label></li>
<li><label><input type="radio" class="radio" id="radio_01_04" name="radio_01" checked="" /> 4개</label></li>
</ul>
</div>