"JQuery 버튼 텍스트 변경"의 두 판 사이의 차이

2022년 3월 2일 (수) 14:39 기준 최신판

jQuery 버튼 텍스트 변경
jQuery 버튼 텍스트 바꾸기

1 방법: button 태그는 html()[ | ]

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
  $('#button1').click( function() {
    if( $(this).html() == '인증번호 받기' ) {
      $(this).html('확인');
    }
    else {
      $(this).html('인증번호 받기');
    }
  });
});
</script>
 
<button id='button1'>인증번호 받기</button>

2 방법: input 태그는 val()[ | ]

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
  $('#button1').click( function() {
    if( $(this).val() == '접기' ) {
      $(this).val('펼치기');
    }
    else {
      $(this).val('접기');
    }
  });
});
</script>
 
<input type='button' value='접기' id='button1' />

3 같이 보기[ | ]

4 참고[ | ]

http://stackoverflow.com/questions/5580616/jquery-change-button-text

@@ 1번째 줄: / 1번째 줄: @@
+{{소문자}}
 ;jQuery 버튼 텍스트 변경
+;jQuery 버튼 텍스트 바꾸기
 ==방법: button 태그는 html()==
-*예제: http://zetawiki.com/jq/change-button-text.html
+<syntaxhighlight lang='html' run>
-<source lang='html5'>
 <script src="//code.jquery.com/jquery.min.js"></script>
 <script>
 $(function() {
    $('#button1').click( function() {
-     if( $(this).html() == '접기' ) {
+     if( $(this).html() == '인증번호 받기' ) {
-       $(this).html('펼치기');
+       $(this).html('확인');
      }
      else {
-       $(this).html('접기');
+       $(this).html('인증번호 받기');
      }
    });
@@ 18번째 줄: / 19번째 줄: @@
 </script>
-<button id='button1'>접기</button>
+<button id='button1'>인증번호 받기</button>
-</source>
+</syntaxhighlight>
 ==방법: input 태그는 val()==
-*http://zetawiki.com/jq/change-button-text2.html
+<syntaxhighlight lang='html' run>
-<source lang='html5'>
 <script src="//code.jquery.com/jquery.min.js"></script>
 <script>
@@ 39번째 줄: / 39번째 줄: @@
 <input type='button' value='접기' id='button1' />
-</source>
+</syntaxhighlight>
 ==같이 보기==
@@ 45번째 줄: / 45번째 줄: @@
 *[[input 태그]]
-==참고 자료==
+==참고==
 *http://stackoverflow.com/questions/5580616/jquery-change-button-text
 [[분류: jQuery]]