"한 개만 고를까? 여러 개 고를까? radio & checkbox 완전 정리"

▶  <input type="radio"> & <input type="checkbox"> 정리

 

▶ 이 명령어가 뭐하는 건지

 

• 둘 다 사용자로부터 선택을 입력받는 폼 요소.
• radio: 여러 옵션 중 하나만 선택 가능
• checkbox: 여러 옵션 중 복수 선택 가능

▶ 명령어 문법

▪ radio

<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="blue"> Blue

 

 

▪ checkbox

<input type="checkbox" name="hobby" value="music"> Music
<input type="checkbox" name="hobby" value="travel"> Travel

 

▶ 파라미터(속성)에 어떤 게 들어갈 수 있는지?

 

▶ 주로 어떻게 쓰는지

 

• radio: 성별, 결제 방법, 배송 옵션 등 단일 선택이 필요한 경우
• checkbox: 관심사, 알림 수신 여부 등 복수 선택이 필요한 경우
• <label>과 함께 사용하여 접근성과 클릭 편의성 향상

▶ 예시

▪ radio 예시 (성별 선택)

<form>
  <label><input type="radio" name="gender" value="male"> 남성</label>
  <label><input type="radio" name="gender" value="female"> 여성</label>
</form>

 

 

▪ checkbox 예시 (취미 선택)

<form>
  <label><input type="checkbox" name="hobby" value="reading"> 독서</label>
  <label><input type="checkbox" name="hobby" value="sports"> 운동</label>
  <label><input type="checkbox" name="hobby" value="movie"> 영화감상</label>
</form>

 

💡 추가 팁: radio는 반드시 name 속성을 동일하게 설정해야만 한 가지만 선택 가능하게 작동함.

 

▶ <label>과 함께 사용하는 방법

<label>은 클릭 범위를 넓혀주고 접근성을 높이는 중요한 요소. (2가지 방법)

🔹 1) <input>을 <label> 안에 넣기

<label>
  <input type="checkbox" value="apple"> 사과
</label>

 

🔹 2) for + id 연결

<input type="radio" id="banana" name="fruit" value="banana">
<label for="banana">바나나</label>

 

▶ JavaScript로 값 다루기

🔸 1) 체크된 checkbox 값 가져오기

<form id="hobbyForm">
  <label><input type="checkbox" name="hobby" value="music"> 음악</label>
  <label><input type="checkbox" name="hobby" value="travel"> 여행</label>
  <label><input type="checkbox" name="hobby" value="game"> 게임</label>
  <button type="button" onclick="getHobbies()">확인</button>
</form>

<script>
  function getHobbies() {
    const checked = document.querySelectorAll('input[name="hobby"]:checked');
    const values = Array.from(checked).map(cb => cb.value);
    alert("선택한 취미: " + values.join(', '));
  }
</script>

 

🔸 2) 선택된 radio 값 가져오기

<form id="genderForm">
  <label><input type="radio" name="gender" value="male"> 남자</label>
  <label><input type="radio" name="gender" value="female"> 여자</label>
  <button type="button" onclick="getGender()">확인</button>
</form>

<script>
  function getGender() {
    const selected = document.querySelector('input[name="gender"]:checked');
    alert("선택된 성별: " + (selected ? selected.value : "선택 안함"));
  }
</script>

 

 

아직 줄임말은 이해가 잘 안된다면

const values = Array.from(checked).map(cb => cb.value);
alert("선택한 취미: " + values.join(', '));

// 체크된 것 가져오기
const checked = document.querySelectorAll('input[name="hobby"]:checked');

// 배열로 바꾸고 값만 추출하기
const checkedArray = Array.from(checked); // 진짜 배열로 만들기
const values = []; // 값 저장용 빈 배열
for (let i = 0; i < checkedArray.length; i++) {
  values.push(checkedArray[i].value); // 각 checkbox의 value 값을 저장
}

alert("선택한 취미: " + values.join(', '));

---

alert("선택된 성별: " + (selected ? selected.value : "선택 안함"));

// 선택된 라디오 가져오기
const selected = document.querySelector('input[name="gender"]:checked');

if (selected) {
  alert("선택된 성별: " + selected.value);
} else {
  alert("선택된 성별: 선택 안함");
}