여러 개의 항목 중에서 하나만 선택하게 하는 선택 버튼 형태는 라디오 버튼 (input type="radio")을 쓰는 것이 가장 기본적이긴 하지만, 필요에 따라서는 a 링크를 써야할 때가 있습니다.
이번에 제가 진행했었던 결제 페이지 만들기가 그런 경우였는데요. 아래 내용을 그대로 따라해봅시다.
* HTML
<a href="#;" class="Type" id="card">
<div class="payType on">
<div class="payType_title">
간편결제<br /><span>(네이버페이,카카오페이,삼성페이 등)</span>
</div>
<div class="chk_img" id="card_arr">
<img src="체크용 버튼 이미지" />
</div>
</div>
</a>
<a href="#;" class="Type" id="card_ISP">
<div class="payType">
<div class="payType_title">
신용카드 결제<br /><span>(인증서 제출방식, 앱카드)</span>
</div>
<div class="chk_img" id="card_ISP_arr">
<img src="체크용 버튼 이미지" />
</div>
</div>
</a>
<a href="#;" class="Type" id="mobile">
<div class="payType">
<div class="payType_title">휴대폰 결제</div>
<div class="chk_img" id="mobile_arr">
<img src="체크용 버튼 이미지" />
</div>
</div>
</a>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
* css
.payType {
display: block;
border: 1px solid #dadada;
border-radius: 5px;
width: 517px;
padding: 23px;
margin-bottom: 10px;
}
.payType > .payType_title {
display: inline-block;
vertical-align: middle;
}
.payType_title {
font-size: 15px;
font-weight: 700;
color: #ff273d;
}
.payType_title > span {
font-size: 12px;
font-weight: 500;
color: #333;
}
.payType.on {
background: #fff6f6;
border: 1px solid #ff273d;
}
.chk_img {
float: right;
display: none;
vertical-align: middle;
}
.payType.on > .chk_img {
display: inline-block;
}
* javascript
$(".Type").click(function (e) {
e.preventDefault();
var id = $(this).attr("id");
$(".Type .payType").removeClass("on");
$(".chk_img").hide();
$("#" + id + " .payType").addClass("on");
$("#" + id + "_arr").show();
});
이처럼 클릭 시, class를 추가 또는 제거하는 스크립트로 선택된 버튼과 선택되지 않은 버튼을 구분해줍니다.
위 내용으로 a링크가 아닌 라디오 버튼으로 버튼형태를 만들 수 있습니다. 아래 내용을 참고해주세요.
* html
<label class="Type" id="card">
<div class="payType on">
<input type="radio" name="value1" />
<div class="payType_title">
간편결제<br /><span>(네이버페이,카카오페이,삼성페이 등)</span>
</div>
<div class="chk_img" id="card_arr">
<img src="체크용 버튼 이미지" />
</div>
</div>
</label>
<label class="Type" id="card_ISP">
<input type="radio" name="value1" />
<div class="payType">
<div class="payType_title">
간편결제<br /><span>(네이버페이,카카오페이,삼성페이 등)</span>
</div>
<div class="chk_img" id="card_ISP_arr">
<img src="http://imivory.me/img/noname/icon_chk.png" />
</div>
</div>
</label>
<label class="Type" id="mobile">
<input type="radio" name="value1" />
<div class="payType">
<div class="payType_title">휴대폰 결제</div>
<div class="chk_img" id="mobile_arr">
<img src="체크용 버튼 이미지" />
</div>
</div>
</label>
* css
.payType {
display: block;
border: 1px solid #dadada;
border-radius: 5px;
width: 517px;
padding: 23px;
margin-bottom: 10px;
}
.payType > .payType_title {
display: inline-block;
vertical-align: middle;
}
.payType_title {
font-size: 15px;
font-weight: 700;
color: #ff273d;
}
.payType_title > span {
font-size: 12px;
font-weight: 500;
color: #333;
}
.payType.on {
background: #fff6f6;
border: 1px solid #ff273d;
}
.chk_img {
float: right;
display: none;
vertical-align: middle;
}
.payType.on > .chk_img {
display: inline-block;
}
input[type="radio"] {
display: none;
}
* javascript
$(".Type").click(function (e) {
e.preventDefault();
var id = $(this).attr("id");
$(".Type .payType").removeClass("on");
$(".chk_img").hide();
$("#" + id + " .payType").addClass("on");
$("#" + id + "_arr").show();
});
