썬키의 개발노트

[JS] input type="checkbox" 일 때 이벤트 핸들러 활용 본문

FRONT-END/JAVASCRIPT

[JS] input type="checkbox" 일 때 이벤트 핸들러 활용

썬키 2023. 1. 30. 21:30

 

input type이 checkbox 일 때, JS의 이벤트 핸들러를 활용해 합계 금액이 자동으로 변경되는

작고 소중한 웹 애플리케이션을 만들어보았다.

 

HTML 소스코드

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>체육관 이용 요금1</title>
</head>
<body>
<h1>체육관 이용 요금 1</h1>
<p>기본 사용료(4시간) 40,800원</p>
<br>
<input type="checkbox"
        value="20000"
        name="option"
        onclick="check()">야간조명(20,000원)
<br>
<input type="checkbox"
        value="4000"
        name="option"
        onclick="check()">배구네트 x 2장(4,000원)
<br>
<input type="checkbox"
        value="20000"
        name="option"
        onclick="check()">배구공 x 10(20,000원)
<br><br>
합계금액:<input id="sum" value="40800" readonly>원정​

 

JS 소스코드
<script type="text/javascript">
function check() {
const check = document.getElementsByName('option');
// check의 타입 확인해보기
console.log(check);
let sum = 40800;

for (i = 0; i < check.length; i++) {
    if (check[i].checked) {
        sum += parseInt(check[i].value);
    }
}
document.getElementById('sum').value = sum;
}
</script>

우선, 이벤트 핸들러 방식 중 DOM을 조작하는 방식인 getElementsByName을 이용해

check 변수에 태그 name이 'option' 인 input 태그들을 담았다.

여기서 check 변수의 타입은 console.log()를 이용해서 확인해보면 NodeList라는 것을 알 수 있다.

 

check 변수의 타입 = NodeList

 

NodeList는 JS의 API가 아닌 Web Browser의 API라는 점에서 Array와 차이점이 있다.

엄밀히 말하자면 배열과는 다르지만, for문이나 forEach문을 이용해 배열의 원소들을 활용할 수 있다.

 

그리고 .checked는 boolean 타입의 값을 반환하는데 NodeList의 0번째 인덱스가 체크가 되었으면

sum에 0번째 인덱스의 value값을 더해주고, 합계 값에 sum 값을 입력해주는 방법으로 구현하였다.

단, input tag 안의 value 값은 문자열로 들어가기 때문에 형변환은 필수❗❗이다.

저작자표시 (새창열림)

'FRONT-END > JAVASCRIPT' 카테고리의 다른 글

[JS] JSON의 정의와 함수 사용 방법  (0) 2023.02.02
[JS] XMLHttpRequest  (0) 2023.02.01
[JS] 특정 <tr>, <td> 값에 접근하기  (0) 2023.01.31
[JS] JS를 이용하여 TABLE 만들기  (0) 2023.01.31
[JS] onkeydown, onkeypress 차이점  (0) 2023.01.31
'FRONT-END/JAVASCRIPT' Related Articles more