You have nothing that will call your
checkNumber1
or
checkNumber2
functions. Javascript functions won't magically call themselves!
Try something like this:
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="allCheckbox">
<label class="form-check-label" for="allCheckbox">
All
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="number1Checkbox">
<label class="form-check-label" for="number1Checkbox">
Number 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="number2Checkbox">
<label class="form-check-label" for="number2Checkbox">
Number 2
</label>
</div>
document.addEventListener("DOMContentLoaded", () => {
const all = document.getElementById("allCheckbox");
const number1 = document.getElementById("number1Checkbox");
const number2 = document.getElementById("number2Checkbox");
const showChecked = () => {
if (number1.checked && number2.checked) {
alert("Numbers 1 and 2 are checked.");
} else if (number1.checked) {
alert("Number 1 checked.");
} else if (number2.checked) {
alert("Number 2 checked.");
}
};
number1.addEventListener("change", showChecked);
number2.addEventListener("change", showChecked);
all.addEventListener("change", () => {
number1.checked = all.checked;
number2.checked = all.checked;
showChecked();
});
});
Demo[
^]