SeouliteLab

jQuery를 사용한 라디오 버튼 선택 방법 본문

프로그래밍

jQuery를 사용한 라디오 버튼 선택 방법

Seoulite Lab 2024. 4. 15. 08:44

jQuery를 이용하면 웹 페이지에서 라디오 버튼을 손쉽게 조작할 수 있습니다. 라디오 버튼은 여러 옵션 중 하나를 선택할 때 사용되며, jQuery를 활용하면 선택된 항목을 식별하고 조작할 수 있습니다. 아래 예제를 통해 jQuery를 사용하여 라디오 버튼을 다루는 방법을 알아보겠습니다.

예제 1: 모든 폼 안의 라디오 버튼 선택하기

$(document).ready(function() {
    var radioButtons = $("form input[type='radio']");
    radioButtons.prop("checked", true);
});

이 예제는 페이지에 있는 모든 폼 안의 라디오 버튼을 선택하고 모든 라디오 버튼을 선택 상태로 변경합니다.

예제 2: 특정 폼 안의 라디오 버튼 선택하기

$(document).ready(function() {
    var radioButtons = $("#surveyForm input[type='radio']");
    radioButtons.attr("disabled", true);
});

이 예제는 id가 "surveyForm"인 폼 안의 라디오 버튼을 선택하고 비활성화 처리합니다.

예제 3: 라디오 버튼에 이벤트 추가하기

$(document).ready(function() {
    $("input[type='radio']").change(function() {
        var selectedValue = $(this).val();
        alert("선택된 값: " + selectedValue);
    });
});

이 예제는 라디오 버튼이 변경될 때마다 선택된 값을 알려주는 알림창을 띄웁니다.