$(".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();
});
<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="https://tistory2.daumcdn.net/tistory/2766242/skin/images/icon_chk.png" />
</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="https://tistory2.daumcdn.net/tistory/2766242/skin/images/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="https://tistory2.daumcdn.net/tistory/2766242/skin/images/icon_chk.png" />
</div>
</div>
</label>
.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;
}
External resources loaded into this fiddle: