[javascript/jquery] javascript get radio checked value example / 자바스크립트 선택된 라디오버튼 값 가져오는 방법

[javascript/jquery] javascript get radio checked value example / 자바스크립트 선택된 라디오버튼 값 가져오는 방법

 

 

javascript 에서

 

radio 버튼으로 구성된 html 태그중

 

선택된 radio 버튼의 값을 가져와야 하는

 

경우가 있습니다.

 

그럴때는 아래와 같이 querySelector 를 이용하시면 됩니다.

 

 

우선 아래와 같이 3개의 같은 클래스명과 같은 name 을 가지는 radio 버튼이 있다고 가정하고,

<input class="gbn_chk" type="radio" id="gbn_01" name="gbn_radio" value="a">
<input class="gbn_chk" type="radio" id="gbn_01" name="gbn_radio" checked value="b">
<input class="gbn_chk" type="radio" id="gbn_01" name="gbn_radio" value="c">

 

위 버튼들 중 선택된 radio 버튼의 값을 가져오고 싶으면

 

아래와 같이 querySelector 를 사용하시면 됩니다!

var gbn = document.querySelector('.gbn_chk:checked').value;

 

위세어 gbn 이라는 변수에 담은 값을 출력해보면

 

아래와 같이 선택된 2번째 radio 의 값인 b 가 들어있게 됩니다!

console.log(gbn);
// b

 

참고들 하세요!