[tip] a 링크, label 선택 버튼 (button) 체크 형태 만들기

여러 개의 항목 중에서 하나만 선택하게 하는 선택 버튼 형태는  라디오 버튼 (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();
  });