I'm encountering some issues with my checkbox functionality. I'm attempting to use event listeners on checkboxes to capture true or false values and then passing this data through another event listener on a button to verify that at least one checkbox is selected. I believe there must be a simpler way to achieve this task, preferably using pure JavaScript. Any guidance would be greatly appreciated. Below is the code snippet for reference.
<body>
<script src="racquetObjects.js"></script>
<div class="mainContainer">
<div class="selectors">
<form action="">
<div class="checkboxes">
<input type="checkbox" id="babolat" value="Babolat" />
<label for="babolat">Babolat</label>
<input type="checkbox" id="wilson" value="Wilson" />
<label for="wilson">Wilson</label>
<input type="checkbox" id="power" value="Power" />
<label for="power">Power</label>
<input type="checkbox" id="control" value="Control" />
<label for="control">Control</label>
<input type="checkbox" id="popular" value="Popular" />
<label for="popular">Popular</label>
</div>
<button type="button" id="find">Find</button>
</form>
</div>
<div class="racquetContainer"></div>
<div class="bench"></div>
</div>
<script src="racquetFinderCB.js"></script>
<script src="racquetFinder.js"></script>
</body>
const findButton = document.querySelector("#find");
const checkboxes = document.querySelectorAll(
".checkboxes input[type=checkbox]"
);
const checkIfChecked = function(element) {
element.checked ? return true : return false;
}
const verifySelection = () => {
let isChecked = [];
checkboxes.forEach((el) => {
el.addEventListener("click", (e) => {
isChecked.push(checkIfChecked(e.target));
});
});
if (isChecked.includes(true)) {
console.log("Ready to search!");
} else {
console.log("Please select an option");
}
};
findButton.addEventListener("click", verifySelection);