자바스크립트 - 자동차 가격 옵션 체크 박스 예제

안녕하세요

이번 시간에는 저번 시간에 있었던 체크박스 기초 예제를 좀 응용한 예제입니다.

먼저 결과 화면을 보자면 아래와 같습니다.

기본 차량가격은 13450000원입니다.

하지만 옵션에 있는 항목들을 체크하면 기존 차량가격에 플러스가 됩니다.

폼 화면은 그냥 직접 구현해 보시고

로직만 공개하겠습니답~!

/*자동차 옵션 체크 박스를 클릭할 때 마다 함수 
정의문 내에 일련의 실행문을 실행합니다.*/
function car(){
  //[1]초기의 차량 기본 가격(id=total)을 알아내 변수에 할당한다.
 var basic=document.getElementById('total').defaultValue; // 초기값(13450000)만 가져온다, 변경 안됨 
 var basicPrice=parseInt(basic);
 //[2] opt1 ~ opt3 까지 체크박스에 체크가 되어 있으면
    //옵션 가격을 기본 가격에 누적 시킨다.
 for(var i=1;i<=3;i++){
  //체크박스 참조를 얻어온다.
  var obj=document.getElementById('opt'+i);
  if(obj.checked){
   basicPrice+=parseInt(obj.value);
  }
 }
 //[3] 총 가격(id가 total) 요소에 총누적가를 출력한다.
 document.getElementById('total').value=basicPrice;
}