Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
JavaScript example to filter an array depending on multiple checkbox conditions.
Following is the code to filter an array depending on multiple checkbox conditions using JavaScript. This example demonstrates how to apply cumulative filters based on user checkbox selections.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array Filter with Multiple Checkboxes</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
margin: 10px 0;
}
.result {
font-size: 18px;
font-weight: 500;
color: red;
margin: 10px 0;
}
.checkbox-container {
margin: 10px 0;
}
input[type="checkbox"] {
margin-right: 8px;
}
</style>
</head>
<body>
<h1>Filter an Array with Multiple Checkbox Conditions</h1>
<div class="sample">Original Array: [22,10,50,30,90,33,80,75,33,99,150,105]</div>
<div class="result">Filtered Result: [22,10,50,30,90,33,80,75,33,99,150,105]</div>
<div class="checkbox-container">
<input type="checkbox" id="check1" class="check" onclick="filterArr()" />
<label for="check1">Number should be greater than 50</label>
</div>
<div class="checkbox-container">
<input type="checkbox" id="check2" class="check" onclick="filterArr()" />
<label for="check2">Number should be divisible by 5</label>
</div>
<div class="checkbox-container">
<input type="checkbox" id="check3" class="check" onclick="filterArr()" />
<label for="check3">Number should be divisible by 3</label>
</div>
<h3>Tick the checkboxes above to apply filters to the array</h3>
<script>
let resEle = document.querySelector(".result");
let checkEle = document.querySelectorAll(".check");
let originalArr = [22, 10, 50, 30, 90, 33, 80, 75, 33, 99, 150, 105];
function filterArr() {
let filteredArr = [...originalArr]; // Start with original array
checkEle.forEach((checkbox, index) => {
if (checkbox.checked) {
if (index === 0) {
filteredArr = filteredArr.filter(num => num > 50);
} else if (index === 1) {
filteredArr = filteredArr.filter(num => num % 5 === 0);
} else if (index === 2) {
filteredArr = filteredArr.filter(num => num % 3 === 0);
}
}
});
resEle.innerHTML = "Filtered Result: [" + filteredArr.join(",") + "]";
}
// Initialize display
resEle.innerHTML = "Filtered Result: [" + originalArr.join(",") + "]";
</script>
</body>
</html>
How It Works
The filtering mechanism works by:
-
Starting Fresh: Each filter operation begins with the original array using the spread operator
[...originalArr] - Applying Conditions: For each checked checkbox, the corresponding filter condition is applied sequentially
- Cumulative Filtering: Multiple conditions work together - if both "greater than 50" and "divisible by 5" are checked, only numbers that satisfy both conditions remain
Key Filter Conditions
| Checkbox | Condition | Example Numbers |
|---|---|---|
| Greater than 50 | num > 50 |
75, 80, 90, 99, 105, 150 |
| Divisible by 5 | num % 5 === 0 |
10, 30, 50, 75, 80, 90, 105, 150 |
| Divisible by 3 | num % 3 === 0 |
30, 33, 75, 90, 99, 105, 150 |
Output Examples
No checkboxes selected: Shows the original array [22,10,50,30,90,33,80,75,33,99,150,105]
Only "Greater than 50" checked: Shows [80,75,90,99,150,105]
Both "Greater than 50" and "Divisible by 5" checked: Shows [75,80,90,105,150]
Conclusion
This example demonstrates how to implement dynamic array filtering with multiple checkbox conditions. The key is to start with the original array for each filter operation and apply conditions cumulatively based on user selections.
Updated on: 2026-03-15T23:18:59+05:30
2K+ Views
Advertisements