Javascript와 jQuery로 라디오 버튼 체크 여부 확인하는 방법

 

 

자바스크립트와 jQuery로 라디오 버튼 체크 여부 확인하기

JavaScript와 jQuery를 사용하여 라디오 버튼의 체크 여부를 확인하는 방법에 대해 알아봅시다.

 

 

 

728x90

 

1. Javascript로 라디오 버튼의 체크 여부 확인하기

JavaScript에서는 checked 속성을 통해 라디오 버튼이 선택되었는지 여부를 확인할 수 있습니다. checked 속성은 true 또는 false 값을 가지며, 선택되었을 경우 true, 선택되지 않았을 경우 false가 반환됩니다.

(1) 하나의 라디오 버튼 확인하기

let radio = document.getElementById("radioId");

if (radio.checked) {
    console.log("선택되었습니다!");
} else {
    console.log("선택되지 않았습니다.");
}

위 코드에서 "radioId"는 실제로 존재하는 해당 요소(라디오 버튼)의 ID 값으로 바꿔주셔야 합니다.

(2) 여러 개의 라디오 버튼 중 선택된 것 찾기
여러 개의 라디오 버튼 중에서 어떤 것이 선택되었는지 파악하려면 반복문과 함께 사용하여 각각의 상태를 확인할 수 있습니다. 다음은 예시 코드입니다:

let radios = document.querySelectorAll(".radioClass");

for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
        console.log("라디오 " + (i + 1) + "가 선택되었습니다!");
    }
}

위 코드에서 "radioClass"는 실제로 존재하는 모든 해당 요소들(라디오 버튼들)이 공통으로 가진 클래스 이름으로 바꿔주셔야 합니다.

 

 

2. jQuery로 라디오 버튼의 체크 여부 확인하기

 

jQuery도 간단하게 사용하여 HTML 문서 내에 있는 하나 혹은 여러 개의 라디오 버튼들 중 어떤 것이 선택되었는지 파악할 수 있습니다.

(1) 하나의 라디오버튼 확인하기
다음은 jQuery를 사용하여 하나의 라디오버튼이 체크되어 있는지 아닌지 확인합니다:

let radio = $("#radioId");

if (radio.is(":checked")) {
    console.log("선택되었습니다!");
} else {
    console.log("선택되지 않았습니다.");
}

위 코드에서 "#radioId" 부분은 실제로 존재하는 해당 요소(라디오버튼일 가능성 있다!)에 대한 ID 값으로 바꿔주셔야 합니다.

(2) 여러 개의 라디오 버튼 체크 확인하기
여러개의 요소 중 하나라도 체크되어 있을 때 특정 동작을 실행하고자 할 때 다음과 같이 작성할 수 있다:

$(".radionClass").each(function() {
    if ($(this).is(":checked")) {
        console.log($(this).attr('id') + "가 선택 되어있습니다!");
    }
});

위 코드에서 "#radionClass" 부분은 실제로 존재하는 해당 요소들(모두 타입일 가능성 있다!)에 대한 클래스 이름으로 바꿔주셔야 합니다.

 

 

 

 

마무리

JavaScript와 jQuery 모두 간단하게 사용하여 HTML 문서 내에 있는 하나 혹은 여러 개의의 라디오 버튼 중 어떤 것이 선택되었는지 파악할 수 있습니다.  필요에 따라 위 예시들을 참고해서 원하는 동작을 구현해 보세요!

더 많은 예시와 실전 활용 사례들은 공식 문서나 참고 자료들에서 확인하실 수 있으니 궁금한 점이 있다면 찾아보세요!

Happy coding! 😊