javascript - How to get value of selected radio button?

<input type="radio" id="r1" name="userName" value="Hong"/> Hong
<input type="radio" id="r2" name="userName" value="Kim"/> Kim
<input type="radio" id="r3" name="userName" value="Lim"/> Lim
<button type="button" onclick="getValue()">get value</button>

 

위와 같은 코드가 있다고 가정할 때, 선택된 라디오 버튼의 값을 구하는 방법은 다음과 같습니다.

 

1. querySelector 이용
   이 방법은 IE9 이상 및 기타 모든 브라우저에서 동작합니다.
   

   function getValue() {
     alert(document.querySelector('input[name="userName"]:checked').value);
   }​

2. checked 속성으로 유효성 체크
   

   function getValue() {
     if (document.getElementById('r1').checked) {
       alert("r1 : " + document.getElementById('r1').value);
     }
     if (document.getElementById('r2').checked) {
       alert("r2 : " + document.getElementById('r2').value);
     }
     if (document.getElementById('r3').checked) {
       alert("r3 : " + document.getElementById('r3').value);
     }
   }​

3. jquery 사용
   

   function getValue() {
     alert($("input[type='radio'][name='userName']:checked").val());
   }​