Edit in JSFiddle

  $(".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();
  });
<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="https://tistory2.daumcdn.net/tistory/2766242/skin/images/icon_chk.png" />
    </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="https://tistory2.daumcdn.net/tistory/2766242/skin/images/icon_chk.png" />
    </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="https://tistory2.daumcdn.net/tistory/2766242/skin/images/icon_chk.png" />
    </div>
  </div>
</a>
  .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;
  }

External resources loaded into this fiddle: