자바스크립트 계산 기능 만들기(+ input radio, checkbox)

보험 가입 희망 양식 작성 시 간단한 보험료 계산 기능을 추가하길 원해서 만들게 되었다.

 

가입을 원하는 상품들을 라디오와 체크박스 버튼을 통해 선택하도록 만들어야했다.

 

완성작 먼저!

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.

실제로는 여기서 탭 기능까지 추가해 몇 가지 기능들을 더 넣어야했지만 다 빼버리고 가장 기본적인 동작 원리만 뽑아왔다.

 

코딩을 하기 전 어떤 부분에 신경을 써야 하는지 머릿속에 간단하게 떠올렸다.

 

- 배열을 사용해보자.
- 라디오타입은 label 하나를 선택하면 직전에 선택한 label은 자동으로 취소되므로 
배열에 하나의 값만 담기도록 만들자.
- 체크박스타입은 원하는대로 선택이 가능하기때문에 체크해제했을 때 배열에서 삭제하는 기능만 신경쓸 것.

 

 

1. 라디오 버튼에 들어간 함수

normalArray = new Array;

	function normalSelect(){
		var normal_extravar = document.querySelector('input[name="extra_vars6"]:checked');
		var normal_extravar_val = $(normal_extravar).val();
		normalArray.push(normal_extravar_val);
		if(normalArray.length > 1){
			normalArray.shift();
		}
	}

배열을 하나 만들어 선택한 value를 뒤에 넣는다. (push 사용)
배열의 길이가 1을 넘어가면 앞에있는 value값을 삭제한다. (shift 사용)
그러면 항상 배열의 길이는 1을 넘지 않게되고 가장 최근에 선택한 값만 배열에 존재하게 된다!

 

굴러들어온 돌로 박힌 돌 빼는 전략!

 

생각보다 간단하다. 사실 아는게 별로 없어서.. 알고있는 지식 최대한 활용하는 수 밖에...ㅠㅠ

 

 

2. 체크박스에 들어간 함수

specialArray = new Array;

	function eoSelect(checked){
		var special_extravar = $(checked).val();
		if(checked.checked==true){
			specialArray.push(special_extravar);
		} else {
			for(i=0; i < specialArray.length;i++){
				if(specialArray[i] == special_extravar){
				specialArray.splice(i,1)
				}
			}
		}
	}

체크가 됐으면 체크된 input 의 value를 배열에 넣는다.
체크가 해제됐으면 배열에 있는 값들 중 체크해제 된 input의 value와 일치하는 값이 있는지 찾아본다.
해당 인덱스번호의 값만 배열에서 삭제한다.

 

 

3. 라디오, 체크박스에 전부 들어가는 함수

function calculation(){
	var TotalPrice = document.getElementsByClassName('total_price')[0];
	var result = 0;

	if(specialArray.length > 0){
		for(i=0; i<specialArray.length;i++){
			result += parseInt(specialArray[i]);
		}
	}
	if(normalArray.length > 0){
		result += parseInt(normalArray[0]);
	}


	Res=result.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
	TotalPrice.value = Res+'원';
}

normalArry와 specialArray를 모두 합해서 총 계산 칸에 넣는다.

 

 

끝!