SeouliteLab

jQuery의 .val() 메서드: 입력 요소의 값 가져오기 및 설정하기 본문

프로그래밍

jQuery의 .val() 메서드: 입력 요소의 값 가져오기 및 설정하기

Seoulite Lab 2024. 3. 27. 11:00

jQuery의 .val() 메서드는 선택한 입력 요소(input, select, textarea 등)의 값을 가져오거나 설정합니다. 이를 통해 사용자의 입력을 읽거나 입력 요소의 값을 동적으로 변경할 수 있습니다.

예제 1: 값 가져오기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .val() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 값 가져오기 예제
  $('#button1').click(function(){
    var value = $('#input1').val();
    console.log('입력 값:', value);
  });
});
</script>
</head>
<body>

<input type="text" id="input1" value="기본값">
<button id="button1">값 가져오기</button>

</body>
</html>
<!-- 출력 결과 -->
<!-- 입력 값: 기본값 -->

예제 2: 값 설정하기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .val() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 값 설정하기 예제
  $('#button2').click(function(){
    $('#input2').val('새로운 값');
  });
});
</script>
</head>
<body>

<input type="text" id="input2" value="">
<button id="button2">값 설정하기</button>

</body>
</html>
<!-- 출력 결과 -->
<!-- <input type="text" id="input2" value="새로운 값"> -->

예제 3: 다중 요소에 대한 값 설정하기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .val() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 다중 요소에 대한 값 설정하기 예제
  $('#button3').click(function(){
    $('.item').val('동일한 값');
  });
});
</script>
</head>
<body>

<input type="text" class="item">
<input type="text" class="item">
<input type="text" class="item">
<button id="button3">값 설정하기</button>

</body>
</html>
<!-- 출력 결과 -->
<!-- <input type="text" class="item" value="동일한 값"> -->
<!-- <input type="text" class="item" value="동일한 값"> -->
<!-- <input type="text" class="item" value="동일한 값"> -->
저작자표시 비영리 변경금지

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

jQuery의 callbacks.disabled() 메서드: 콜백 함수 비활성화 여부 확인하기  (0) 2024.03.27
jQuery의 callbacks.disable() 메서드: 콜백 함수 비활성화하기  (0) 2024.03.27
jQuery의 .toggleClass() 메서드: 클래스 토글하기  (0) 2024.03.27
jQuery의 .removeProp() 메서드: 속성 제거하기  (0) 2024.03.27
jQuery의 .removeClass() 메서드: 클래스 제거하기  (0) 2024.03.27
'프로그래밍' Related Articles more