새로배운태그: checkbox의 값이 true or false인지확인하는 if (checkbox1.checked == true) {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>주문서</h1>
<h2>먹고 싶은 메뉴를 선택합니다</h2>
<label for=""><input type="checkbox" value="25000" class="check1">치킨 25,000 \</label>
<br><br>
<label for=""><input type="checkbox" value="15000" class="check2">초밥 15,000 \</label>
<br><br>
<label for=""><input type="checkbox" value="15000" class="check3">떡볶이 15,000 \</label>
<hr>
<span style="font-size: 2rem;">가격:</span><span style="font-size: 30pt;" class="total"></span>
<script>
price = 0
let total = document.querySelector(".total")
let checkbox1 = document.querySelector(".check1")
checkbox1.addEventListener("change",function(){
if (checkbox1.checked == true) {
price += Number(checkbox1.value);
total.innerHTML = price
}
else {
price -= checkbox1.value
total.innerHTML = price
}
})
let checkbox2 = document.querySelector(".check2")
checkbox2.addEventListener("change",function(){
if (checkbox2.checked == true) {
price += Number(checkbox2.value);
total.innerHTML = price
}
else {
price -= checkbox2.value
total.innerHTML = price
}
})
let checkbox3 = document.querySelector(".check3")
checkbox3.addEventListener("change",function(){
if (checkbox3.checked == true) {
price += Number(checkbox3.value);
total.innerHTML = price
}
else {
price -= checkbox3.value
total.innerHTML = price
}
})
</script>
</body>
</html>
꿈꾸는 개발자