<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bamboo Asian Grille - 온라인 주문 양식</title>
<link rel="stylesheet" type="text/css" href="bamboo.css">
<script type="text/javascript" src="../../js/jquery-1.2.1.js" ></script>
<script type="text/javascript">
$(function (){
$('fieldset div div').hide();
$(':checkbox').click(function (){
// ???? true = this.checked
var checked = this.checked;
$('div', $(this).parents('div:first'))
.css('display', checked ? 'block': 'none');
$('input[type=text]', $(this).parents('div:first'))
.attr('disabled', !checked)
.css('color', checked ? 'black' : '#f0f0f0')
.val(1)
.change()
.each(function (){ if (checked) this.focus(); });
});
$('span[price] input[type=text]').change(function (){
// this의 첫번째 형제 노드인<span>엘리먼트를 찾는다.
$('~ span:first', this).text(
$(this).val() *
$(this).parents('span[price]:first').attr('price')
);
});
$('span[price] input[type=text]').change();
});
</script>
</head>
<body>
<h1>Bamboo Asian Grille</h1>
<h2>온라인 주문 메뉴</h2>
<fieldset>
<legend>에피타이저</legend>
<div>
<label>
<input type="checkbox" name="appetizers"
value="imperial"/>
임페리얼 롤(Fried Imperial rolls) (2)
</label>
<span price="3">
<input type="text" name="imperial.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="imperial.option"
value="pork" checked="checked"/>
돼지고기
</label>
<label>
<input type="radio" name="imperial.option"
value="vegetarian"/>
채식
</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers" value="spring"/>
스프링 롤(Spring rolls) (2)
</label>
<span price="4">
<input type="text" name="spring.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="spring.option" value="pork"
checked="checked"/>
돼지고기
</label>
<label>
<input type="radio" name="spring.option"
value="shrimp"/>
돼기고기와 새우
</label>
<label>
<input type="radio" name="spring.option"
value="vegetarian"/>
채식
</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers" value="vnrolls"/>
월남쌈(Vietnamese rolls) (4)
</label>
<span price="5">
<input type="text" name="vnrolls.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="vnrolls.option" value="pork"
checked="checked"/>
돼지고기
</label>
<label>
<input type="radio" name="vnrolls.option"
value="shrimp"/>
돼지고기와 새우
</label>
<input type="radio" name="vnrolls.option"
value="vegetarian"/>
<label>채식</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers" value="rangoon"/>
크랩 랑군 튀김(Crab rangoon) (8)
</label>
<span price="6">
<input type="text" name="rangoon.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="rangoon.option"
value="sweet checked="checked"/>
새콤 달콤 소스
</label>
<label>
<input type="radio" name="rangoon.option" value="hot"/>
핫 머스타드
</label>
<label>
<input type="radio" name="rangoon.option" value="both"/>
모두
</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers"
value="stickers"/>
야끼 만두(Pot stickers) (6)
</label>
<span price="5">
<input type="text" name="stickers.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="stickers.option"
value="pork" checked="checked"/>
돼지고기
</label>
<label>
<input type="radio" name="stickers.option"
value="vegetarian"/>
채식
</label>
</div>
</div>
<div></div>
</fieldset>
</body>
</html>
'jQuery' 카테고리의 다른 글
| jQuery In Action chapter 8-2 (0) | 2009.12.20 |
|---|---|
| jQuery In Action chapter 8-1 (0) | 2009.12.20 |
| jQuery In Action chapter 4-4 (0) | 2009.12.20 |
| jQuery In Action chapter 4-3 (0) | 2009.12.20 |
| jQuery In Action chapter 4-2 (0) | 2009.12.20 |