아래는 효과적인 라디오 버튼을 생성하기 위한 방법과 이미지, CSS, 자바스크립트의 모든 방법에 대하여 정리한 내용입니다. 주요 내용은 아래와 같습니다.

1. 라디오 버튼 생성을 위한 html 코드
2. 라디오 버튼 css 스타일 코드
3. 라디오 버튼 구현을 위한 자바스크립트 인터렉션

아래 소스의 특징으로는 라디오 버튼 스타일의 커스터마이징 부분입니다. 브라우저 디폴트 디자인을 사용하지 않고 label 태그를 사용하였으며 라디오 버튼의 아이콘을 다르게 변경하였습니다. 라디오 버튼(Radio Button) 이미지의 소스 코드는 아래 링크를 참고해주세요.

참고로 아래 코드를 구현시 생성되는 모습은 아래 스크린샷과 유사하게 나타날 것입니다.


스크린샷) 구현될 라디오 버튼 이미지


* 아이콘 이미지 다운받기
http://webisfree.com/freeimage/?imgquery=508-radio,-button,-icon,-input,-%EB%9D%BC%EB%94%94%EC%98%A4,-%EB%B2%84%ED%8A%BC,-%EC%95%84%EC%9D%B4%EC%BD%98,-%EC%9E%85%EB%A0%A5-59


# HTML 코드
<body>
   <span class="title_span">이미지 크기설정</span>
   <p class="radio_p">
      <label for="btn01"><span class="icon radio"></span></label>
      <span class="radioText">1024 x 800</span>
      <input id="btn01" hidden type="radio" name="" />
   </p>

   <p class="radio_p">
      <label for="btn02"><span class="icon radio"></span></label>
      <span class="radioText">1600 x 1200</span>
      <input id="btn02" hidden type="radio" name="" />
   </p>
</body>


# CSS 스타일 설정
<style type="text/css">
   .radio_p {clear: both; overflow: hidden; margin: 0 15px 0 0; padding: 0; display: inline-block; }
   .radio_p.last { margin-bottom: 0; }
   .radio_p label { display: block; float: left; cursor: pointer; vertical-align: top; margin: 0 4px 0 0; width: 20px; height: 22px; }
   .radio_p label .icon.radio { display: block; margin: 1px 0 0; width: 20px; height: 22px; background: url(./../images/icon_sprites2.png) no-repeat -95px -86px; }
   .radio_p.checked label .icon.radio { background-position: -13px -86px; }
   .radio_p.checked label .icon.radio { background-position: -69px -86px; }
   .radio_p .radioText { float: left; margin: 0 26px 0 0; vertical-align: top; position: relative; height: 22px; line-height: 22px; }
   .radio_p.checked .radioText { color: #5AB6E2; }
</style>


# 자바스크립트 설정
/* Radio button Click Event */
$(function() {
   var raioEle = $('.radio_p label');
   raioEle.on('click', function() {
      // Remove previous check
      $(this).parent().siblings('.radio_p').removeClass('checked');

      // Add Class selected radio only
      $(this).parent().addClass('checked');
   });
});