본문 바로가기
프로그램

jQuery의 change() 이벤트를 활용한 실용적인 예제들

by 다온다올과함께 2024. 11. 24.

 

 

 

 

jQuery의 change() 이벤트는 <input>(텍스트, 체크박스, 라디오 버튼 등), <select> 등 값이 변경될 때 발생합니다. 이를 활용한 실용적인 예제들을 소개합니다.

 

 

 

1. 드롭다운 메뉴에서 선택에 따라 내용 변경

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change() 드롭다운 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="dropdown">
        <option value="">옵션 선택</option>
        <option value="red">빨강</option>
        <option value="green">초록</option>
        <option value="blue">파랑</option>
    </select>
    <p id="output">선택된 색상: 없음</p>
    <script>
        $('#dropdown').change(function() {
            let color = $(this).val();
            $('#output').text('선택된 색상: ' + (color ? color : '없음'));
        });
    </script>
</body>
</html>

 

사용 시나리오: 드롭다운 선택에 따라 페이지의 내용을 동적으로 변경

 

 

 

2. 체크박스 선택 시 특정 섹션 활성화/비활성화 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change() 체크박스 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <label>
        <input type="checkbox" id="toggleDetails"> 세부 정보 보기
    </label>
    <div id="details" style="display: none; margin-top: 10px;">
        <p>세부 정보: 여기에 표시됩니다.</p>
    </div>
    <script>
        $('#toggleDetails').change(function() {
            if ($(this).is(':checked')) {
                $('#details').slideDown();
            } else {
                $('#details').slideUp();
            }
        });
    </script>
</body>
</html>

 

사용 시나리오: 사용자가 선택한 옵션에 따라 추가 정보를 보여줌

 

 

 

3. 라디오 버튼으로 스타일 변경

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change() 라디오 버튼 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .box { width: 100px; height: 100px; margin-top: 10px; }
    </style>
</head>
<body>
    <label><input type="radio" name="color" value="red"> 빨강</label>
    <label><input type="radio" name="color" value="green"> 초록</label>
    <label><input type="radio" name="color" value="blue"> 파랑</label>
    <div class="box" id="colorBox" style="background-color: gray;"></div>
    <script>
        $('input[name="color"]').change(function() {
            let color = $(this).val();
            $('#colorBox').css('background-color', color);
        });
    </script>
</body>
</html>

 

사용 시나리오: 사용자가 선택한 옵션에 따라 페이지의 스타일 변경

 

 

 

4. 텍스트 필드 값 변경 시 유효성 검사

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change() 텍스트 필드 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <label for="email">이메일:</label>
    <input type="text" id="email" placeholder="example@domain.com">
    <p id="error" style="color: red; display: none;">유효하지 않은 이메일 주소입니다.</p>
    <script>
        $('#email').change(function() {
            let email = $(this).val();
            let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (regex.test(email)) {
                $('#error').hide();
            } else {
                $('#error').show();
            }
        });
    </script>
</body>
</html>

 

사용 시나리오: 폼 입력에서 실시간으로 유효성 검사 제공

 

 

 

5. 다중 선택 박스 값 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change() 다중 선택 박스 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="multiSelect" multiple>
        <option value="apple">사과</option>
        <option value="banana">바나나</option>
        <option value="cherry">체리</option>
        <option value="date">대추</option>
    </select>
    <p>선택된 항목: <span id="selectedItems">없음</span></p>
    <script>
        $('#multiSelect').change(function() {
            let selected = $(this).val() || []; // 선택된 값 배열
            $('#selectedItems').text(selected.join(', ') || '없음');
        });
    </script>
</body>
</html>

 

사용 시나리오: 다중 선택 목록에서 선택된 항목을 보여주기

 

 

 

6. 파일 업로드 시 선택된 파일 이름 표시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change() 파일 업로드 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="file" id="fileInput">
    <p>선택된 파일: <span id="fileName">없음</span></p>
    <script>
        $('#fileInput').change(function() {
            let fileName = $(this).val().split('\\').pop(); // 파일 이름 추출
            $('#fileName').text(fileName || '없음');
        });
    </script>
</body>
</html>

 

사용 시나리오: 파일 업로드 UI에서 선택된 파일 이름을 표시

 

 

 

7. 연관된 필드 자동 업데이트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change() 연관 필드 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <label for="price">상품 가격:</label>
    <input type="number" id="price" placeholder="숫자를 입력하세요">
    <p>부가세 (10%): <span id="tax">0</span></p>
    <script>
        $('#price').change(function() {
            let price = parseFloat($(this).val()) || 0;
            let tax = (price * 0.1).toFixed(2); // 10% 세금 계산
            $('#tax').text(tax);
        });
    </script>
</body>
</html>

 

사용 시나리오: 사용자 입력에 따라 연관된 필드를 동적으로 업데이트

 

 

 

위 예제들은 실제 프로젝트에서 유용하게 활용될 수 있으며 사용자 입력에 따라 동적 동작을 구현하는 데 매우 효과적입니다. change() 이벤트는 입력값 변화 감지에 특화되어 있어 특히 폼과 관련된 기능 구현에서 자주 사용됩니다.

 

 

 

#jquery #change() #event #드롭다운메뉴에서선택에따라내용변경 #체크박스선택시특정섹션활성화/비활성화 #라디오버튼으로스타일변경 #텍스트필드값변경시유효성검사 #다중선택박스값출력 #파일업로드시선택된파일이름표시 #연관된필드자동업데이트

 

 

 

 

 

반응형

'프로그램' 카테고리의 다른 글

jquery 체크박스 선택 시 특정 섹션 활성화/비활성화  (0) 2024.11.27
jquery 드롭다운 메뉴에서 선택에 따라 내용 변경  (0) 2024.11.26
jQuery의 keydown() / keyup() / keypress() 이벤트를 활용한 실용적인 예제들  (0) 2024.11.23
jQuery의 focus() / blur() 이벤트를 활용한 실용적인 예제들  (0) 2024.11.22
jQuery의 dblclick() 이벤트를 활용한 실용적인 예제들  (0) 2024.11.21

관련글

댓글

티스토리툴바