방법1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>체육관 이용 요금</h1>
기본 사용료(2면,4시간) 40,800원
<br>
<input type="checkbox" name="nightlight" value=20000 onclick="cal()">야간 조명 (20,000원)
<br>
<input type="checkbox" name="nightlight" value=4000 onclick="cal()">배구 네트x2면 (4,000원)
<br>
<input type="checkbox" name="nightlight" value=5000 onclick="cal()">배구x10개 (5,000원)
<br><br>
합계 금액
<input type="text" id="value" value=40800>
원형
<script type="text/javascript">
function cal() {
var value = document.getElementsByName("nightlight"); // 0 1 2
var sum=40800;//지정값
var a=0;
var b=0;
var c=0;
if(value[0].checked)
a=value[0].value * 1; //string값으로 넘어오기때문에 *1해주어 number형으로 바꿔줌
if(value[1].checked)
b=value[1].value *1;
if(value[2].checked)
c=value[2].value *1;
sum+= a+b+c;
document.getElementById("value").value = sum;
}
</script>
</body>
</html>
방법2.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>체육관 이용요금</h1>
기본 이용료(4시간) 40,800원
<form name="f1">
<input type="checkbox" onclick="sum(0)">야간조명
<br>
<input type="checkbox" onclick="sum(1)">배구 네트 *2장 (4,000원)
<br>
<input type="checkbox" onclick="sum(2)">배구공 * 10개(5,000원)
<br>
<input type="text" id="t1" size="10" value="40800">
</form>
<script type="text/javascript">
//text필드 value로 가져오기, Number로 감싸면 parseInt와 같은 효과
var total = Number(document.getElementById("t1").value);
//배열 생성 방법
//var arr=["aaa","bbb"];
var arr = new Array(2); //0~2번지
arr[0] = 20000;
arr[1] = 4000;
arr[2] = 5000;
function sum(n) {
if (document.f1.elements[n].checked == true) {
total = total + arr[n];
} else {
total = total - arr[n];
}
document.f1.elements[3].value = total;
}
</script>
</body>
</html>
