Click here to Skip to main content
15,844,156 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have modal, which contains checkboxes within it.

I am trying to display:
- An alert when checkbox 1 is checked, that says "Number 1 is checked".
- An alert when checkbox 2 is checked, that says "Number 2 is checked".
- An alert when both are checked, that says "Number 1 and 2 are checked".

However, when the checkboxes are checked, following the above instructions, the alerts don't appear...

What I have tried:

This is the HTML...
<pre lang="HTML"><pre><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true"</span>
        </button>
      </div>
      <div class="modal-body">
         <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="allCheckbox" onchange="checkAll()">
      <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>
  </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


This is the JS:

function checkAll() {
    var all = document.getElementById("allCheckbox");
    var number1 = document.getElementById("number1Checkbox");
    var number2 = document.getElementById("number2Checkbox");
    if (all.checked) {
      number1.checked = true;
      number2.checked = true;
    } else {
      number1.checked = false;
      number2.checked = false;
    }
  }
  
  function checkNumber1() {
    var number1 = document.getElementById("number1Checkbox");
    var number2 = document.getElementById("number2Checkbox");
    if (number1.checked) {
      alert("Number 1 is checked");
    }
    if (number1.checked && number2.checked) {
      alert("Number 1 and 2 are checked");
    }
  }

  function checkNumber2() {
    var number1 = document.getElementById("number1Checkbox");
    var number2 = document.getElementById("number2Checkbox");
    if (number2.checked) {
      alert("Number 2 is checked");
    }
    if (number1.checked && number2.checked) {
      alert("Number 1 and 2 are checked");
    }
  }
Posted
Updated 19-Jan-23 1:49am

1 solution

You have nothing that will call your checkNumber1 or checkNumber2 functions. Javascript functions won't magically call themselves!

Try something like this:
HTML
<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>
JavaScript
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[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900