라디오 버튼 값 jQuery와 JS로 가져오는 방법 정리

인트로

HTML의 라디오 버튼을 접근 할 수 있는 방법은 무엇일까?
여러개의 선택지 중에 선택된 것을 고를 수 있을까?
라디오 버튼의 id는 label에 연결되는데, 여러개의 라디오 버튼을 어떻게 가져올까?
...
등등의 물음으로 시작한 서칭이다.

 

Example

<input type="radio" name="review.score" id="score1" value="1">
<label for="score1">1점</label>
<input type="radio" name="review.score" id="score2" value="2">
<label for="score1">2점</label>
...

• input type은 radio로 id 값은, label의 연결로 활용되었다.

label은 for = id값 으로 연결해서 사용한다.
이렇게 연결하면 label을 클릭할 경우, 해당 id값의 input이 클릭 처리된다.

jQuery 로 처리하기

$("input[name='review.score']:checked").val()
// score의 라디오 중 체크된 것의 값만 가져옴
// 아무것도 선택안되어있으면, undefined

$("input[name='review.score']").is(':checked')
// 전체 radio 중에서 하나라도 체크되어 있는지 확인
// 아무것도 선택안되어있으면, false

• input에서 지정한 name 속성값을 활용하여 가져온다.
• 제이쿼리의 경우 간단하게 체크된 값만 가져오거나, 체크된 값이 존재하는 지 등 필요한 상황별로 기능들을 제공하고 있어 간편하다.

 

바닐라 JS(javascript) 에서 처리하기

var radios = document.getElementsByName('review.score');

radios.forEach(elem => {
    if(elem.checked){
        console.log(elem.value);
    }
});

• radio 버튼과 체크 박스는 배열요소이다
• radios.value 를 하면, 배열.value 과 같은 의미이기 때문에, undefiend로 나올 수 밖에 없음
• 따라서 배열을 순회하며 checked 여부를 가져오고 그 값을 처리/반환 하는 방향으로 가야한다.

배열.forEach는 배열에서 사용하는 반복문으로, 리턴값이 없다는 특징이 있다.