[Javascript] checkbox & Event 예제 <토핑>

티스토리 뷰

WEB/자바스크립트

[Javascript] checkbox & Event 예제 <토핑>

춘햄 2021. 5. 14. 14:47

checkbox를 모두 호출하여 체크 값을 확인한 후에 checkbox.value를 가격에 더해주는 간단한 예제이며, 이벤트 리스너에서 쓰이는 this의 개념이 조금 헷갈려서 코드를 remind하기 위한 포스팅이다.

◎javascript

var price = 24000;

var sideMenu = document.querySelectorAll(".checkbx");
var total = document.querySelector("#total");

for(var i = 0; i < sideMenu.length; i++){
	sideMenu[i].onclick = totalPrice;
}


function totalPrice() {
	if(this.checked == true){
		price += parseInt(this.value);
	} else {
		price -= parseInt(this.value);
	}
	total.value = price + "원";
}

◎html

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>연습문제 1</title>
	<link rel="stylesheet" href="css/sol-1.css">
</head>
<body>
	<div id="container">
    <h1>피자 주문</h1>
		<form>
      <fieldset>
        <legend>사이즈</legend>
        <p>Large - 24000 원 </p>
      </fieldset>
      <fieldset>
        <legend>추가 주문 </legend>        
          <label><input type="checkbox" name="pickle" class="checkbx" value="800">피클(800원)</label>
          <label><input type="checkbox" name="chilly" class="checkbx" value="300">칠리 소스(300원)</label>
          <label><input type="checkbox" name="deeping" class="checkbx" value="200">디핑 소스(200원)</label>
          <label><input type="checkbox" name="stick" class="checkbx" value="4800">치즈스틱(4개, 4800원)</label>
          <label><input type="checkbox" name="salad" class="checkbx" value="2400">콘 샐러드(2400원)</label>        
      </fieldset>
      <fieldset>
        <legend>합계</legend>
        <input type="text" id="total" name="total" class="price" readonly>
      </fieldset>
		</form>	
	</div>

	<script src="js/sol-1.js"></script>
</body>
</html>

'WEB > 자바스크립트' 카테고리의 다른 글

[Javascript] 함수의 반복 실행 <setInterval> (0)	2021.05.14
[Javascript] 브라우저 정보 추출 (0)	2021.05.14
[Javascript] input 태그 value 제어 (0)	2021.05.14
[Javascript] form 내부 태그 제어 (0)	2021.05.14
[Javascript] 이벤트 (0)	2021.05.13