input:radio에 대해서 css 적용하기

아래 이미지와 같은 모습으로 만들기
방법

input [type=radio]를 먼저 준비하고 css로 display:none 처리한다

옆에 label을 준비한다

label에 css를 준다(background-image, position:absolute)

jquery로 label이 클릭되면

  1. 그에 해당하는 input[type=radio]가 checked 되도록 attr를 수정해주고
  2. 선택된 label 은 클래스를 부여해서 background-image가 체크된 것으로 바뀌게 한다
코드 예제
수업등록
1:1수업 그룹수업 원데이 클래스
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>수업등록</title>
<meta property="og:type" content="article" />
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1.0,user-scalable=no">
<style>
body, input,select{margin:0;padding:0;
font-family: "나눔 바른 고딕","NanumBarunGothic","맑은 고딕","Malgun Gothic","Apple Gothic","돋움",Dotum,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
}
.box_container{padding:0 20px 0 20px;overflow:hidden;}
label.classtype{width:20px;height:20px;background-image:url('http://onesunny2.cafe24.com/wp-content/files/imgs/btn_rdo_d_19_19.png');box-sizing:border-box;position:absolute;background-position:center;
background-repeat: no-repeat;background-size:cover;cursor:pointer;}
input.classtype{display:none;}
label.classtype2{width:20px;height:20px;background-image:url('http://onesunny2.cafe24.com/wp-content/files/imgs/btn_rdo_s_19_19.png');box-sizing:border-box;position:absolute;background-position:center;
background-repeat: no-repeat;background-size:cover;}
span.type{font-size:13px;margin-right:10px;margin-left:25px;}
</style>
</head>
<body>
<div class="container">
<div class="box_container">
<div class="overflow">
<input class="classtype" name="classtype"type="radio" id="pt" checked><label class="classtype" id="pt" ></label><span class="type">1:1수업</span>
<input class="classtype" name="classtype"type="radio" id="group"> <label class="classtype" id="group"></label><span class="type">그룹수업</span>
<input class="classtype" name="classtype"type="radio" id="oneday"> <label class="classtype" id="oneday"></label><span class="type">원데이 클래스</span>
</div>
</div>
</div>
</div>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
$('label[class="classtype"]').click(function(){
$('input[class="classtype"]').attr('checked',false);
$('label[class="classtype classtype2"]').removeClass("classtype2");
var name = $(this).attr('id');
var element = document.getElementById(name);
$(element).attr('checked',true);
$(this).toggleClass('classtype2');
});
});

</script>
</body>
</html>
카테고리: HTML&CSS

댓글 남기기