[JavaScript] 체크박스에 체크된 값만 계산하기

갱장이... 오랜만이균... 히히

 

---

자바스크립트로, 웹 페이지에서 체크된 항목들의 값만 계산(덧셈)하는 예제를 작성해 보았다.

쇼핑몰 등의 서비스에서 체크된 항목들의 합계를 구하는 UI를 구현할 때 응용할 수 있다.

<input type = "checkbox" id = "cb1" name = "price" onclick = "calcPrice()"><span id = "price1">100</span><br>
<input type = "checkbox" id = "cb2" name = "price" onclick = "calcPrice()"><span id = "price2">200</span><br>
<input type = "checkbox" id = "cb3" name = "price" onclick = "calcPrice()"><span id = "price3">300</span><br>
<span id = "result"></span>

일단 HTML의 body 태그의 내부는 이렇게 구성하였다.

체크박스의 name 속성을 'price'로 지정하여 같은 그룹으로 지정하고, id 속성을 지정하였다.

그리고 각 체크박스의 체크가 되었을 때 또는 해제되었을 때 값을 다시 계산하여야 하므로 onclick 속성도 지정하였다.

 

숫자가 쓰여있는 텍스트의 경우, 해당하는 텍스트에 써진 숫자를 가져와서 계산하기로 생각하였으므로 일반 텍스트가 아닌 span 태그로 감싸서 Javascript에서 가져오기 쉽게 하였다.

 

그리고 result라는 id를 가진 span 태그를 사용하여 결과값을 표현하는 구역을 지정하였다.

 

해당 HTML 태그를 웹 브라우저에서 확인하면 다음과 같이 표시된다.

---

다음은 자바스크립트 코드 구성이다. 이 함수는 체크박스의 onclick 속성에 값으로 지정되어 있어서 체크박스가 클릭될 때 마다 실행 된다.

  function calcPrice() {
	let cbArray = document.getElementsByName('price');
	let priceArray = new Array();
	for(let i = 0; i < cbArray.length; i++) {
		if(cbArray[i].checked == true) {
			let spanId = cbArray[i].id.replace('cb', 'price');
			let priceTag = document.getElementById(spanId).innerText;
			priceArray.push(priceTag);
		}
	}

	let total = 0;

	for(let i = 0; i < priceArray.length; i++) {
		total += parseInt(priceArray[i]);
	}	

	document.getElementById('result').innerText = total;
  }

코드의 흐름을 설명하자면 다음과 같다.

 

1. getElementsByName('price')로 'price'라는 name 속성을 가지고 있는 체크박스 요소를 배열로 취득한다.

 

2. 1에서 만든 배열의 길이만큼 반복문을 실행하면서 다음과 같은 조건을 확인한다.

 - 요소 중에 checked 속성이 true, 즉, 체크가 된 체크박스가 있는가?

 

3. 만약에 있다면 그 요소의 id를 문자열로 취득한다. (체크박스의 id는 모두 cb로 시작함)

 

4. 문자열의 cb라는 부분을 price로 치환한다. (숫자를 감싼 span의 id는 모두 price로 시작함)

 

5. 4번에서 만든 price와 숫자로 구성된 id를 가지고 있는 요소의 텍스트를 취득하여 새로운 배열에 push한다.

 

6. 그 후에 새로운 배열의 길이만큼 반복문을 실행하면서 배열의 안에 들어있는 문자열을 숫자로 치환하여 합계를 구한다.

 

7. 합계를 결과값을 위한 요소에 텍스트로 설정한다.

 

조금 헷갈릴 수도 있겠지만... 뭐 이런식으로 하면 

 

 

체크박스 옆에 있는 숫자의 합계를 구할 수 있다.