자바스크립트로 라디오 버튼 체크 제어하기

-

 

-

안녕하세요! 오늘은 자바스크립트를 이용해 라디오 버튼의 체크 상태를 제어하고, 선택된 값을 활용하는 방법에 대해 알아보겠습니다.

웹 폼에서 라디오 버튼은 사용자에게 여러 옵션 중 하나를 선택하게 할 때 사용되죠.
사용자가 버튼을 클릭할 때마다 선택된 값을 추출하여 다른 동작을 할 수 있도록 하면, 웹 페이지의 동적인 기능을 구현할 수 있습니다.

1. 라디오 버튼 HTML 코드

먼저, 라디오 버튼을 HTML로 작성해보겠습니다.
여러 옵션을 제공하는 기본적인 라디오 버튼의 예는 다음과 같습니다.

<input type="radio" id="rd11" name="radioCheck" value="one" onclick="javascript:check();" checked="checked" />
<label for="rd11">One</label>

<input type="radio" id="rd12" name="radioCheck" value="two" onclick="javascript:check();" />
<label for="rd12">Two</label>

<input type="radio" id="rd13" name="radioCheck" value="three" onclick="javascript:check();" />
<label for="rd13">Three</label>

<input type="radio" id="rd14" name="radioCheck" value="four" onclick="javascript:check();" />
<label for="rd14">Four</label>

위 코드에서는 4개의 라디오 버튼을 만들었고, 각 버튼에 onclick="javascript:check();"를 추가하여 버튼이 클릭될 때마다 자바스크립트 함수 check()가 실행되도록 설정했습니다.

 

2. 자바스크립트로 선택된 값 가져오기

이제 라디오 버튼을 클릭했을 때, 선택된 값이 무엇인지 가져오는 자바스크립트 코드를 작성해볼게요.

function check() {
    // 선택된 라디오 버튼의 값을 가져옵니다
    var deliType = $("input[name='radioCheck']:radio:checked").val();

    // 선택된 값을 콘솔에 출력
    console.log("선택된 값: " + deliType);

    // 선택된 값에 따라 알림창을 띄우거나 다른 동작을 할 수 있습니다
    if (deliType === "one") {
        alert("One을 선택했습니다.");
    } else if (deliType === "two") {
        alert("Two를 선택했습니다.");
    } else if (deliType === "three") {
        alert("Three를 선택했습니다.");
    } else if (deliType === "four") {
        alert("Four를 선택했습니다.");
    }
}

위 코드에서 check() 함수는 라디오 버튼을 클릭할 때마다 실행됩니다.
$("input[name='radioCheck']:radio:checked").val();는 현재 선택된 라디오 버튼의 값을 가져오는 jQuery 코드입니다.
그 값을 바탕으로 선택된 옵션에 맞는 메시지를 출력하도록 했습니다.

이제 동작 방식을 설명해볼게요.

1. 페이지가 처음 로드될 때 기본적으로 첫 번째 라디오 버튼이 선택되어 있습니다.
2. 사용자가 다른 라디오 버튼을 클릭하면 check() 함수가 실행됩니다.
   이 함수는 선택된 라디오 버튼의 값을 가져오고, 그 값에 맞는 알림창을 띄워주는 방식으로 동작합니다.

라디오 버튼을 클릭할 때마다 선택된 값이 출력되며, 그 값에 따라 다르게 동작을 할 수 있습니다.

 

3. jQuery 없이 순수 JavaScript로 구현하기

만약 jQuery를 사용하지 않고 순수 자바스크립트로 구현하고 싶다면, 다음과 같이 작성할 수 있습니다.

function check() {
    // 모든 라디오 버튼을 가져옵니다
    var radios = document.getElementsByName('radioCheck');
    var deliType = "";

    // 선택된 라디오 버튼을 찾기
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            deliType = radios[i].value;
            break;
        }
    }

    // 값을 출력하거나 다른 작업을 수행
    console.log("선택된 값: " + deliType);

    if (deliType === "one") {
        alert("One을 선택했습니다.");
    } else if (deliType === "two") {
        alert("Two를 선택했습니다.");
    } else if (deliType === "three") {
        alert("Three를 선택했습니다.");
    } else if (deliType === "four") {
        alert("Four를 선택했습니다.");
    }
}

순수 자바스크립트로는 getElementsByName()을 사용하여 radioCheck라는 name 속성을 가진 라디오 버튼들을 모두 가져옵니다.
그리고 각 라디오 버튼이 체크된 상태인지 확인하여 그 값을 추출하는 방식으로 작동합니다.

이번 포스트에서는 자바스크립트를 사용해 라디오 버튼을 제어하고, 선택된 값을 활용하는 방법을 소개했습니다.
jQuery를 사용하면 간편하게 값을 가져올 수 있고, 순수 JavaScript로도 충분히 구현할 수 있습니다.

웹 폼에서 사용자의 입력을 처리할 때 라디오 버튼은 자주 사용되므로,
이와 같은 방식으로 선택된 값을 동적으로 처리할 수 있으면 유용하게 활용할 수 있습니다.
이번 글이 도움이 되셨기를 바랍니다.
궁금한 점이나 추가적인 질문이 있다면 댓글로 남겨주세요!