인터넷 쇼핑몰에서 흔히 볼수 있는 요거
정보 동일 체크 버튼을 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 |
