[Javascript] HTML Radio 타입 선택된 값(checked value) 가져오는 방법

Javascript를 사용해서 많은 기능들을 프로그래밍하다보면 굉장히 간단한 것들에 고민을 하는 때가 발생합니다. 이 경우도 그렇습니다.

이번 포스팅에서는 HTML의 radio 타입에서 선택된 값을 가져오는 방법을 알아볼게요.

---

HTML의 radio 타입

radio 타입은 HTML의 input 태그의 타입으로 생성가능한 타입입니다. 라디오타입은 여러 선택사항 중 하나를 선택할 때 사용하는 기능입니다.

<input type=‘radio’ name=‘gender’ value=‘male’/>
<input type=‘radio’ name=‘gender’ value=‘femail’/>

이 경우는 성별을 선택하는 input 태그의 radio 타입입니다. 여기서 javascript 를 이용해서 선택된 값을 가져오는 방법은 무엇일까요?

---

Javascript를 이용해 radio 선택값 가져오기

Javascript를 이용해서 선택된 값을 가져오는 방법은 간단합니다. 바로 querySelector() 함수를 이용하는 방법입니다.

document.querySelector(‘input[name=“gender”]:checked’).value;

querySelector() 함수는 parameter로 넣은 선택자 또는 선택자 그룹내에 일치하는 document 중 첫 번째 element를 반환하는 함수입니다.

* 탐색은 깊이우선(depth-first) 전위(pre-order) 순서로 자식 노드를 검색합니다.

만약 찾고자 하는 값이 없을 경우에는 null을 반환하는 함수입니다.

---

이번 포스팅에서는 Javascript를 이용해서 radio 타입에서 여러개의 선택사항 중에서 선택된 값을 가져오는 방법을 알아보았습니다. 도움이 되셨으면 합니다. 이상입니다.