[HTML_CSS] JQ - val() 메서드 ★★★ - value속성 값설정/값반환 (= val메서드 = 밸메서드) ※ 밸류메서드

목차

1. val() 예제 - <input> 필드의 값을 설정
2. val() 정의
3. val() 구문
4. val() 예제 - wr_1 여분필드 select 값을  wr_10 여분필드에 담기
5. val() 예제 - 계산값 자동 입력
6. val() 예제 - <input> 경우 반환/설정
7. val() 예제 - <select> 경우 반환/설정
8. val() 예제 - <textarea> 경우 반환/설정

val() 예제 - <input> 필드의 값을 설정

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("input:text").val("홈짱닷컴 Homzzang.com");

    });

});

</script>

<p>사이트: <input type="text" name="site"></p>

<button>입력하기</button>

결과보기

val() 정의

선택요소의 value 속성을 반환/설정.

 

---

 

1. 

value 값을 반환하는데 사용되는 경우
처음 일치된 요소의 value 속성의 값을 반환

2. 

value 값을 설정하는데 사용되는 경우
모든 일치된 요소의 value 속성의 값을 설정

※ 주로, HTML form 요소와 함께 사용 됨.

 

val() 구문

반환
$(selector).val()

 

설정

$(selector).val(value)

 

함수 이용해 value 속성값 설정

$(selector).val(function(index,currentvalue))

val() 예제 - wr_1 여분필드 select 값을  wr_10 여분필드에 담기

[예제1]

 

$('#wr_1').change(function(){

    $('#wr_10').val($(this).val());

});

 

---

[예제2]

 

$('#wr_1').change(function(){

    $('#wr_10').val($('#wr_1 option:selected').val());

});

 

---

[예제3]

 

$('#wr_1').change(function(){

    $('#wr_10').val($('select[name=wr_1]').val());

});

 

val() 예제 - 계산값 자동 입력

$('#wr_1, #wr_2').on('change', function() {

    $('#wr_3').val( Number($('#wr_1').val()) * Number($('#wr_2').val()) )

}); 

 

슈와이 님 (170915) https://sir.kr/qa/204273

PS. JS 이용 방법 보기.

val() 예제 - <input> 경우 반환/설정

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<input type="text" id="hz" value="홈짱닷컴">

<script>

// 반환 X 

var hztext = $('#hz').text(); // 반환X

console.log(hztext); 

    

var hzval = $('#hz').val(); // 반환O

console.log(hzval);    

// 설정

$('#hz').text('Homzzang.com'); // 설정X

$('#hz').val('Homzzang.com'); // 설정O

</script>

 

결과보기

val() 예제 - <select> 경우 반환/설정

[주의] - 값 반환은 잘 되나, 값 설정은 안 됨. text() 메서드로 설정해야 함.

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<select id="lang">

  <option value="html">html</option>

  <option value="css">css</option>

  <option value="js" selected>js</option>

</select>

<script>

  // 반환

  var langval = $('#lang option:selected').val();

  console.log(langval); // js

  

  // 설정

  $('#lang option:selected').val('javascript'); // 설정X

  $('#lang option:selected').text('javascript'); // 설정O

</script>

 

결과보기

val() 예제 - <textarea> 경우 반환/설정

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<textarea id="hz">홈짱닷컴</textarea>

<script>

// 반환

var hzval = $('#hz').val();

console.log(hzval); // 홈짱닷컴

  

// 설정

$('#hz').val('Homzzang.com'); // 설정 O

</script>

결과보기