jQuery를 사용한 리셋 버튼 다루기

jQuery를 이용하면 웹 폼에서 리셋 버튼을 쉽게 다룰 수 있습니다. 리셋 버튼은 사용자가 입력한 내용을 초기 상태로 되돌리는 데 사용됩니다. 아래 예제를 통해 jQuery를 사용하여 리셋 버튼을 조작하는 방법을 알아보겠습니다.

예제 1: 모든 리셋 버튼 선택하여 이벤트 추가하기

$(document).ready(function() {
    $("input[type='reset']").click(function() {
        alert("폼이 초기화되었습니다.");
    });
});

이 예제는 페이지에 있는 모든 리셋 버튼을 선택하고 클릭 이벤트가 발생하면 알림창으로 "폼이 초기화되었습니다."라는 메시지를 표시합니다.

예제 2: 특정 폼 안의 리셋 버튼 선택하여 스타일 변경하기

$(document).ready(function() {
    $("#contactForm input[type='reset']").css("background-color", "yellow");
});

이 예제는 id가 "contactForm"인 폼 안의 리셋 버튼을 선택하고 배경색을 노란색으로 변경합니다.

예제 3: 리셋 버튼 클릭 시 입력 필드 초기화하기

$(document).ready(function() {
    $("input[type='reset']").click(function() {
        $(this).closest("form").find("input[type='text']").val("");
    });
});

이 예제는 리셋 버튼이 클릭되면 해당 폼 안의 모든 텍스트 입력 필드의 값을 초기화합니다.