본문 바로가기

web/jQuery

jquery 체크박스를 통한 내용 복사

인터넷 쇼핑몰에서 흔히 볼수 있는 요거

정보 동일 체크 버튼을 true로 하면 정보가 복사되는 이것을 구현해 보았다.(사실...예제로 있던건데 안되서 내가 만들어버렸다;;)

책 : jquery in action 7장 참조



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('#sameAddressControl').click(function(){
          var same = this.checked;
          $('#billAddress').val(same ? $('#shipAddress').val():'');
          $('#billCity').val(same ? $('#shipCity').val():'');
          $('#billState').val(same ? $('#shipState').val():'');
          $('#billZip').val(same ? $('#shipZip').val():'');
          if(same == true){
           $('#billingAddress input').filter('input:text')
       .attr('readonly',true)
     .css('opacity', 0.5);
     }else{
       $('#billingAddress input').filter('input:text').attr('readonly',false)
     .css('opacity', 1);
     }
        });
      });
    </script>
  </head>

  <body>
    <fieldset>
      <legend>시험 양식</legend>
      <div>
        <form name="testForm">
     <div>
       <label>성:</label>
       <input type="text" name="lastName" id="lastName"/>
     </div>
          <div>
            <label>이름:</label>
            <input type="text" name="firstName" id="firstName"/>
          </div>
          
          <div id="shippingAddress">
            <h2>배송지 주소</h2>
            <div>
              <label>거리 주소:</label>
              <input type="text" name="shipAddress"
                     id="shipAddress"/>
            </div>
            <div>
              <label>도시, 주, 우편번호:</label>
              <input type="text" name="shipCity" id="shipCity"/>
              <input type="text" name="shipState" id="shipState"/>
              <input type="text" name="shipZip" id="shipZip"/>
            </div>
          </div>
          <div id="billingAddress">
            <h2>청구지 주소</h2>
            <div>
              <input type="checkbox" id="sameAddressControl"/>
              청구지 주소는 배송지 주소와 동일합니다.
            </div>
            <div>
              <label>거리 주소:</label>
              <input type="text" name="billAddress"
                     id="billAddress"/>
            </div>
            <div>
              <label>도시, 주, 우편번호:</label>
              <input type="text" name="billCity" id="billCity"/>
              <input type="text" name="billState" id="billState"/>
              <input type="text" name="billZip" id="billZip"/>
            </div>
          </div>
        </form>
      </div>
    </fieldset>
  </body>
</html>

-_- 아주 간단하지 않은가;;
jquery 부분만 따로 보면은
 $(function(){
        $('#sameAddressControl').click(function(){
          var same = this.checked;
          $('#billAddress').val(same ? $('#shipAddress').val():'');
          $('#billCity').val(same ? $('#shipCity').val():'');
          $('#billState').val(same ? $('#shipState').val():'');
          $('#billZip').val(same ? $('#shipZip').val():'');
        // 위의 것들은 그대로~ 복사하는거
          if(same == true){
           $('#billingAddress input').filter('input:text')
        .attr('readonly',true)
        .css('opacity', 0.5);
       }else{
         $('#billingAddress input').filter('input:text').attr('readonly',false)
        .css('opacity', 1);
       }
       //체크박스true or false 를 통해서
       //textbox readonly 의 상태를 변경시키고 투명도를 변화시킨다.
        });
      });

-_- 참간단하게 만들수 있구나..;; 나중에 홈페이지 만들때 써먹어야겠다.


'web > jQuery' 카테고리의 다른 글

Useful jQuery Datepicker  (0) 2012.11.20
jquery-number 를 이용하여 천 단위 콤마 간단히 찍기  (2) 2012.11.16
jquery masonry  (0) 2011.01.20
jQuery hide() show()  (0) 2011.01.13
jQuery after() prepend()  (0) 2011.01.11