선택한 제품 계산

모자 : 45000원

신발 : 170000원

가방 : 230000원


"> 09-09_checkbox

선택한 제품 계산

모자 : 45000원

신발 : 170000원

가방 : 230000원


"> 09-09_checkbox

선택한 제품 계산

모자 : 45000원

신발 : 170000원

가방 : 230000원


"> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09-09_checkbox</title>
<style type="text/css">
body {
	font-size: 24px;
}
#total {
	width: 100px;
	height: 26px;
	font-size: 25px;
}

</style>
</head>
<body>
	<h1>선택한 제품 계산</h1>
	<form action="#">
		<input type="checkbox" name="cap" value="45000" onclick="calc(this)"> 모자 : 45000원 <br/><br/>
		<input type="checkbox" name="shoes" value="170000" onclick="calc(this)"> 신발 : 170000원 <br/><br/>
		<input type="checkbox" name="bag" value="230000" onclick="calc(this)"> 가방 : 230000원 <br/><br/>
		<br>
		<label>금액 : </label>
		<input type="text" id="total" value="0"/>
	</form>
	<!-- Javascript -->
	<script type="text/javascript">
		let tot = 0;
		function calc(box){
			if(box.checked){
				tot += parseInt(box.value);
			} else {
				tot -= parseInt(box.value);
			}
			document.getElementById('total').value=tot;
		}
	</script>
</body>
</html>