<html>
<head>
<style type="text/css" title="text/css">
#shippingInfo { display:none }
.jsEnabled #shippingInfo { display:block }
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$('div').addClass('jsEnabled');
$('#sameAsShipping').change( function(){
if(this.checked) {
$('#billingInfo input:text').attr('disabled', 'disabled').each(function(i){
var inputTxt = $('#shippingInfo input:text').eq(i).val();
$(this).val(inputTxt);
});
} else {
$('#billingInfo input:text').removeAttr('disabled');
$('#billingInfo input:text').val('');
}
}).trigger('change');
$('#shippingInfo input:text').bind('keyup change', function(){
if($('#sameAsShipping:checked').length) { //checkbox에 체크된경우
var i = $('#shippingInfo input:text').index(this);
var value = $('#shippingInfo input:text').eq(i).val();
$('#billingInfo input:text').eq(i).val(value);
}
});
});
</script>
</head>
<body>
<div>
<fieldset id="shippingInfo">
<legend>Shipping Address</legend>
<label for="shipName">Name</label>
<input type="text" name="shipName" id="shipName" />
<label for="shipAddress">Address</label>
<input type="text" name="shipAddress" id="shipAddress" />
</fieldset>
</div>
<fieldset id="billingInfo">
<legend>Billing Address</legend>
<label for="sameAsShipping">Same as Shipping</label>
<input type="checkbox" id="sameAsShipping" name="sameAsShipping" value="sameAsShipping">
<label for="billName">Name</label>
<input type="text" name="billName" id="billName" />
<label for="billAddress">Address</label>
<input type="text" name="billAddress" id="billAddress" />
</fieldset>
</body>
</html>
| jQuery 셀렉터 | 선택대상 |
| :text | <input type="text" /> |
| :password | <input type="password" /> |
| :radio | <input type="radio" /> |
| :checkbox | <input type="checkbox" /> |
| :submit | <input type="submit" /> |
| :image | <input type="image" /> |
| :reset | <input type="reset" /> |
| :button | <input type="button" /> |
| :file | <input type="file" /> |
| :hidden | <input type="hidden" /> |
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
var lis = $(":text");
var lis2 = $(":checkbox");
lis.each(function(i){
alert($(this).val());
});
$.each(lis2, function(i){
lis2.attr('checked', 'checked');
});
});
</script>
</head>
<body>
<input type="text" id="userName" name="userName" value="홍길동"/> <br />
<input type="text" id="userName2" name="userName2" value="유관순"/> <br />
<input type="text" id="userName3" name="userName3" value="강감찬" /> <br />
<input type="checkbox" id="ck1" name="ck"/> <br />
<input type="checkbox" id="ck2" name="ck"/> <br />
</body>
</html>
최근 덧글