JavaScript로 여러 체크박스 조건에 따라 배열 필터링하는 방법 (예제 코드 포함)

이 글에서는 JavaScript를 사용해 여러 체크박스 조건에 따라 배열을 동적으로 필터링하는 방법을 소개합니다. 사용자가 체크박스를 선택할 때마다 filter() 메서드가 실행되어, 지정한 조건(예: 50보다 큰 수, 5의 배수, 3의 배수)을 만족하는 요소만 남게 됩니다.

예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>문서</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result, .sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>여러 체크박스 조건에 따라 배열 필터링하기</h1>
<div class="sample">[22, 10, 50, 30, 90, 33, 80, 75, 33, 99, 150, 105]</div>
<div class="result"></div>
<br />
<input type="checkbox" class="check" onclick="filterArr()" />숫자는 50보다 커야 함<br />
<input type="checkbox" class="check" onclick="filterArr()" />숫자는 5로 나누어 떨어져야 함<br />
<input type="checkbox" class="check" onclick="filterArr()" />숫자는 3으로 나누어 떨어져야 함<br />
<h3>위 체크박스를 선택하면 배열에 필터가 적용됩니다</h3>
<script>
    let resEle = document.querySelector(".result");
    let checkEle = document.querySelectorAll(".check");
    let arr = [22, 10, 50, 30, 90, 33, 80, 75, 33, 99, 150, 105];
    let resArr = arr;

    function filterArr() {
        checkEle.forEach((item, index) => {
            if (item.checked && index == 0) {
                resArr = resArr.filter((num) => num > 50);
                resEle.innerHTML = resArr;
            }
            else if (item.checked && index == 1) {
                resArr = resArr.filter((num) => num % 5 == 0);
                resEle.innerHTML = resArr;
            }
            else if (item.checked && index == 2) {
                resArr = resArr.filter((num) => num % 3 == 0);
                resEle.innerHTML = resArr;
            }
        });
    }
</script>
</body>
</html>

코드 설명

document.querySelector(".result") : 필터링된 결과를 화면에 출력할 요소를 선택합니다.
document.querySelectorAll(".check") : 페이지에 있는 모든 체크박스를 NodeList 형태로 가져옵니다.
filterArr() : 체크박스를 클릭할 때마다 onclick 이벤트에 의해 호출되는 함수입니다.
forEach() : 각 체크박스를 순회하면서 체크 여부(checked)와 인덱스를 확인합니다.
인덱스가 0이면 '50보다 큰 수', 1이면 '5의 배수', 2이면 '3의 배수' 조건으로 배열을 걸러냅니다.
filter() 메서드는 콜백 함수가 true를 반환하는 요소만 모아 새로운 배열을 반환하므로, 조건에 맞지 않는 값은 자동으로 제거됩니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

JavaScript로 여러 체크박스 조건에 따라 배열 필터링하는 방법 (예제 코드 포함)

체크박스 중 일부를 선택하면 해당 조건을 만족하는 숫자만 배열에 남게 됩니다.

JavaScript로 여러 체크박스 조건에 따라 배열 필터링하는 방법 (예제 코드 포함)

참고 사항

위 예제에서는 체크박스를 해제해도 이전에 적용된 필터 결과가 그대로 유지됩니다. 실무에서는 filterArr() 함수가 호출될 때마다 resArr를 원본 배열로 먼저 초기화한 뒤, 현재 체크된 모든 조건을 한 번에 반영하도록 구현하는 것이 더 안정적입니다. 이렇게 하면 체크박스를 해제했을 때도 항상 올바른 결과를 얻을 수 있습니다.