[javaScript 라디오 버튼] 텍스트 선택해도 체크 가능하도록 코딩

안녕하세요.

라디오 버튼말고 텍스트를 선택해도 라디오가 체크 가능하도록 만들어 보려고 합니다.
사실 엄청 오래된 기술(?)이지만 매번 잊어서 적어둡니다.

HTML Radio 버튼에서 텍스트 클릭으로 체크 가능하게 하기

라디오 버튼(<input type="radio">)은 기본적으로 작은 원형 버튼만 클릭 가능하지만,
<label> 태그를 활용하면 텍스트를 클릭해도 체크가 가능합니다.

---

1. 라디오를 label로 감싸는 방법

<form>
  <label>
    <input type="radio" name="pay" value="card" />
    신용카드
  </label>

  <label>
    <input type="radio" name="pay" value="bank" />
    계좌이체
  </label>

  <label>
    <input type="radio" name="pay" value="phone" />
    휴대폰결제
  </label>
</form>

• 라벨 안에 라디오와 텍스트를 함께 넣으면, 텍스트 클릭 시 라디오가 선택됩니다.
• 접근성(키보드, 스크린리더)에도 유리합니다.

---

2. for와 id를 활용하는 방법

<form>
  <input type="radio" id="pay-card" name="pay" value="card" />
  <label for="pay-card">신용카드</label>

  <input type="radio" id="pay-bank" name="pay" value="bank" />
  <label for="pay-bank">계좌이체</label>

  <input type="radio" id="pay-phone" name="pay" value="phone" />
  <label for="pay-phone">휴대폰결제</label>
</form>

• 라디오에 id, 라벨에 동일한 for를 지정.
• 라벨 클릭 시 해당 라디오가 선택됩니다.

---

3. 커스텀 스타일 적용 (라디오 숨기고 라벨 꾸미기)

기본 라디오 버튼을 시각적으로 숨기고, 라벨을 버튼처럼 꾸밀 수 있습니다.

<style>
  .sr-only {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .option {
    display:inline-block; padding:.6rem 1rem; border:1px solid #ccc; border-radius:.6rem;
    cursor:pointer; user-select:text; /* 텍스트 드래그 가능 */
    margin-right:.5rem;
  }
  input[type="radio"]:focus + .option { outline:2px solid; outline-offset:2px; }
  input[type="radio"]:checked + .option { border-color:#888; box-shadow:0 0 0 2px inset #ddd; font-weight:600; }
</style>

<form>
  <input class="sr-only" type="radio" id="pay-card" name="pay" value="card">
  <label class="option" for="pay-card">신용카드</label>

  <input class="sr-only" type="radio" id="pay-bank" name="pay" value="bank">
  <label class="option" for="pay-bank">계좌이체</label>

  <input class="sr-only" type="radio" id="pay-phone" name="pay" value="phone">
  <label class="option" for="pay-phone">휴대폰결제</label>
</form>

• .sr-only 클래스로 라디오를 시각적으로 숨기되, 접근성은 유지.
• .option 클래스를 버튼처럼 꾸며 시각적 효과 강화.

---

📌 정리

• 방법 1: 라디오와 텍스트를 <label>로 감싼다.
• 방법 2: for / id를 이용해 라디오와 라벨을 연결한다.
• 방법 3: CSS를 적용해 UI를 커스터마이징할 수 있다.

👉 표준 방법은 라디오 + 라벨 조합이며, JS 없이도 가장 안전하고 접근성이 뛰어납니다.

필요하신분은 편하게 쓰세요.