728x90
728x170
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60 |
<!-- 문서 객체 모델을 사용하여 자동차 견적 미리보기 페이지 만들기 -->
<script type="text/javascript">
function(){
var basic_car=Number(document.getElementById("total").defaultValue);
for(var i=1; i<=3; i++) {
var chkObj=document.getElementById("opt+"+i);
if(chkObj.checked) basic_car += Number(chkObj.value);
}
document.getElementById("total").value=basic_car;
}
</script>
</head>
<body>
<h1>자동차 견적</h1>
<div id="carZone">
<p><img src="car1.jpg" alt="자동차" /></p>
<table id="estimate">
<colgroup>
<col width="380px" /n>
<col width="160px" />
<col width="*" />
</colgroup>
<thread>
<tr>
<th scope="row">옵션</th>
<th scope="row">추가 가격</th>
<th scope="row">선택</th>
</tr>
</thread>
<tfoot>
<tr>
<th scope="col">(기본)차량가격</th>
<td colspan="2">
<input type="text" name="total" id="total" value="13450000" readonly="readonly" />
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td><label for="opt1">인조가죽시트</label></td><td>250000</td>
<td>
<input type="checkbox" name="opt1" id="opt1" value="250000" onclick="car();"/></td>
</tr>
<tr>
<td><label for="opt2">내비게이션</label></td><td>250000</td>
<td>
<input type="checkbox" name="opt2" id="opt2" value="250000" onclick="car();"/></td>
</tr>
<tr>
<td><label for="opt3">선루프</label></td><td>440000</td>
<td>
<input type="checkbox" name="opt3" id="opt3" value="440000" onclick="car();"/></td>
</tr>
</tbody>
</table>
</div>
</body>
</html> |
cs |
소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
728x90
그리드형(광고전용)
'Source Code > JavaScript' 카테고리의 다른 글
| 이벤트 등록 메서드가 브라우저별로 서로 다르게 실행되도록 하기 (0) | 2017.05.21 |
|---|---|
| 이벤트 (Event) (0) | 2017.05.21 |
| 함수를 사용하여 사진 갤러리 만들기 (0) | 2017.05.21 |
| 함수 (Function) (1) | 2017.05.21 |
| 폼 요소 선택자 (0) | 2017.05.21 |
| 문서 객체에 이벤트 핸들러 적용 (0) | 2017.05.21 |
| 선택자 호환성 문제 해결 (0) | 2017.05.21 |
| 문서 객체 모델 (DOM) (0) | 2017.05.21 |
