자바스크립트(JavaScript) 체크박스(checkbox), 라디오 버튼(radio) 체크 여부(checked) 및 체크된 값(checked value) 가져오기

jQuery를 이용하면 다음과 같이 체크박스 또는 라디오 버튼의 체크 여부와 체크된 값을 알아낼 수 있습니다.

$('input[name="checkbox"]').is(':checked'); // 체크박스 체크 여부(checked)
$('input[name="radio"]:checked').val(); // 라디오 버튼 체크된 값(checked value)

 

 

"나는 순수 자바스크립트가 좋아!"라고 하신다면 다음과 같이 처리해 주시면 됩니다.

document.querySelector('#checkbox').checked; // 체크박스 체크 여부(checked)
document.querySelector('input[name="radio"]:checked').value; // 라디오 버튼 체크된 값(checked value)

 

전체 document뿐만 아니라, <form> 태그 등 요소(Element)를 기준으로 querySelector를 이용할 수도 있습니다.

const form = document.getElementById('form'); // 폼 엘리먼트
form.querySelector('#checkbox').checked; // 체크박스 체크 여부(checked)
form.querySelector('input[name="radio"]:checked').value; // 라디오 버튼 체크된 값(checked value)

 

 

심플하지요 ^^?