• 회원가입
  • 로그인

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

목차

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

 

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').valNumber($('#wr_1').val()) * Number($('#wr_2').val()) )

}); 

 

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

PS. JS 이용 방법 보기.


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012