SeouliteLab

jQuery .change() 메소드를 활용한 이벤트 처리 본문

프로그래밍

jQuery .change() 메소드를 활용한 이벤트 처리

Seoulite Lab 2024. 4. 2. 08:22

jQuery의 .change() 메소드는 입력 요소의 값이 변경될 때 발생하는 이벤트에 대한 핸들러를 추가하는 데 사용됩니다. 이 메소드를 사용하면 사용자가 입력 필드에 새로운 값을 입력하거나 선택할 때마다 원하는 동작을 실행할 수 있습니다.

예제 1: 선택 옵션 변경 감지

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .change() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#mySelect').change(function(){
        var selectedOption = $(this).val();
        alert('선택된 옵션: ' + selectedOption);
      });
    });
  </script>
</head>
<body>

<select id="mySelect">
  <option value="option1">옵션 1</option>
  <option value="option2">옵션 2</option>
  <option value="option3">옵션 3</option>
</select>

</body>
</html>
  • 선택한 옵션의 값이 변경될 때마다 해당 옵션 값이 경고창으로 표시됩니다.

이 예제에서는 .change() 메소드를 사용하여 mySelect ID를 가진 셀렉트 요소에 변경 이벤트 핸들러를 추가합니다. 사용자가 옵션을 선택하면 선택한 옵션의 값을 가져와서 경고창으로 표시됩니다.

예제 2: 체크박스 상태 변경 감지

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .change() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myCheckbox').change(function(){
        if($(this).is(':checked')) {
          alert('체크박스가 선택되었습니다!');
        } else {
          alert('체크박스가 해제되었습니다!');
        }
      });
    });
  </script>
</head>
<body>

<input type="checkbox" id="myCheckbox"> 체크박스

</body>
</html>
  • 체크박스의 상태가 변경될 때마다 해당 상태에 따라 경고창이 표시됩니다.

이 예제에서는 .change() 메소드를 사용하여 myCheckbox ID를 가진 체크박스 요소에 변경 이벤트 핸들러를 추가합니다. 사용자가 체크박스를 선택 또는 해제할 때마다 해당 상태에 따라 경고창이 표시됩니다.

예제 3: 텍스트 입력 변경 감지

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .change() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myInput').change(function(){
        var inputValue = $(this).val();
        $('#display').text('입력된 값: ' + inputValue);
      });
    });
  </script>
</head>
<body>

<input type="text" id="myInput" placeholder="텍스트를 입력하세요...">
<div id="display"></div>

</body>
</html>
  • 입력 필드에 새로운 값이 입력될 때마다 해당 값이 표시됩니다.

이 예제에서는 .change() 메소드를 사용하여 myInput ID를 가진 입력 필드에 변경 이벤트 핸들러를 추가합니다. 사용자가 새로운 값을 입력할 때마다 해당 값을 가져와서 display 요소에 텍스트로 표시됩니다.

jQuery의 .change() 메소드를 사용하면 사용자의 입력이 변경될 때마다 특정 동작을 실행할 수 있습니다. 이를 활용하여 웹 애플리케이션의 상호 작용성을 향상시키고 사용자 경험을 개선할 수 있습니다.

저작자표시 비영리 변경금지

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

jQuery .contextmenu() 메소드를 활용한 이벤트 처리  (0) 2024.04.02
클릭 이벤트 처리를 위한 jQuery .click() 메소드  (0) 2024.04.02
jQuery .blur() 메소드를 활용한 이벤트 처리  (0) 2024.04.02
jQuery .bind() 메소드를 활용한 이벤트 처리  (0) 2024.04.02
파이썬의 Union 타입: 다양한 타입의 유연한 결합  (0) 2024.04.01
'프로그래밍' Related Articles more