display message after checkbox limit

Question

I found this snippet from another question but I am wondering how we can tweak it to display a message after the limit is reached. Is the best way to add a slideToggle to the .checkboxmsg in the function?

limit = 0; //set limit

checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes

function checker(elem) {
  if (elem.checked) { //if checked, increment counter
    limit++;
  } else {
    limit--; //else, decrement counter
  }

  for (i = 0; i < checkboxes.length; i++) { // loop through all 
    if (limit == 2) {
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true; // and disable unchecked checkboxes
      }
    } else { //if limit is less than two
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false; // enable unchecked checkboxes
      }
    }
  }
}

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { //call function on click and send current element as param
    checker(this);
  }
}

<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <input type="checkbox" name="check" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check" value="Three"><label>Three</label>
</div>
<div class="checkboxmsg">Only two options are allowed</div>

Answer 1

You can use innerHTML and querySelector to change the div checkboxmsg

limit = 0; //set limit
var checkboxmsg = document.querySelector('.checkboxmsg')

checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes

function checker(elem) {
  if (elem.checked) { //if checked, increment counter
    limit++;
  } else {
    limit--; //else, decrement counter
  }

  for (i = 0; i < checkboxes.length; i++) { // loop through all 

    if (limit == 2) {
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true; // and disable unchecked checkboxes
        checkboxmsg.innerHTML = "Limit reached!"
      }

    } else { //if limit is less than two

      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false; // enable unchecked checkboxes
        checkboxmsg.innerHTML = "Only two options are allowed"
      }

    }
  }

}

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { //call function on click and send current element as param
    checker(this);
  }
}

<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <input type="checkbox" name="check" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check" value="Three"><label>Three</label>
</div>
<div class="checkboxmsg">Only two options are allowed</div>

Answer 2

limit = 0; //set limit

checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes

function checker(elem) {
  if (elem.checked) { //if checked, increment counter
    limit++;
  } else {
    limit--; //else, decrement counter
  }


  for (i = 0; i < checkboxes.length; i++) { // loop through all 
    var ele = document.getElementById("toggleText");

    if (limit == 2) {

      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true; // and disable unchecked checkboxes
      }
ele.style.display = "block";

    } else { //if limit is less than two
       if (ele.style.display == "block") {

        ele.style.display = "none";
    }
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false; // enable unchecked checkboxes
      }

    }
  }

}

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { //call function on click and send current element as param
    checker(this);
  }
}

<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <input type="checkbox" name="check" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check" value="Three"><label>Three</label>
</div>
<div id="toggleText" class="checkboxmsg" style="display: none">Only two options are allowed</div>

Answer 3

Hide the message with a class, and toggle via monitoring limit

limit = 0; //set limit

checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes

msg = document.getElementById('msg');
function checker(elem) {
  if (elem.checked) { //if checked, increment counter
    limit++;
  } else {
    limit--; //else, decrement counter
  }

  if(limit == 2)
    msg.classList.remove('hide');
  else msg.classList.add('hide');
  for (i = 0; i < checkboxes.length; i++) { // loop through all 

    if (limit == 2) {
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true; // and disable unchecked checkboxes
        
      }

    } else { //if limit is less than two

      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false; // enable unchecked checkboxes
      }

    }
  }

}

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { //call function on click and send current element as param
    checker(this);
  }
}

.checkboxmsg.hide{
  display: none
}

<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <input type="checkbox" name="check" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check" value="Three"><label>Three</label>
</div>
<div id="msg" class="checkboxmsg hide">Only two options are allowed</div>

Answer 4

Initially, hide the checkboxmsg div, then show it when the limit is reached, and hide it again if the count is lower.

Here is a function that would show / hide the div:

function toggleMessage(state) {
    var display = state ? 'block' : 'none';
    document.querySelector('.checkboxmsg').style.display = display;
}

Working demo:

limit = 0; //set limit


checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes

function checker(elem) {
  if (elem.checked) { //if checked, increment counter
    limit++;
  } else {
    limit--; //else, decrement counter
  }

  for (i = 0; i < checkboxes.length; i++) { // loop through all 

    if (limit == 2) {
      toggleMessage(true);
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true; // and disable unchecked checkboxes

      }

    } else { //if limit is less than two
      toggleMessage(false);

      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false; // enable unchecked checkboxes
      }

    }
  }

}

function toggleMessage(state) {
  var display = state ? 'block' : 'none';
  document.querySelector('.checkboxmsg').style.display = display;
}

toggleMessage(false);

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { //call function on click and send current element as param
    checker(this);
  }
}

<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <label><input type="checkbox" name="check" value="One">One</label> <br/>
  <label><input type="checkbox" name="check" value="Two">Two</label> <br/>
  <label><input type="checkbox" name="check" value="Three">Three</label>
</div>
<div class="checkboxmsg">Only two options are allowed</div>

Answer 5

You are almost there. Just need to toggle display of message box when limit reached

limit = 0; //set limit

checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]'); //select all checkboxes

function checker(elem) {
  if (elem.checked) { //if checked, increment counter
    limit++;
  } else {
    limit--; //else, decrement counter
  }

  for (i = 0; i < checkboxes.length; i++) { // loop through all 

    if (limit == 2) {
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true;  
        document.getElementsByClassName("checkboxmsg")[0].style.display = "block"
        

      }

    } else { //if limit is less than two

      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false;  document.getElementsByClassName("checkboxmsg")[0].style.display = "none"
      }

    }
  }

}

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { //call function on click and send current element as param
    checker(this);
  }
}

.checkboxmsg{
 display: none;
 color : red !important;
}

<div class="checkboxdiv">
  <input type="hidden" name="check" value="">
  <input type="checkbox" name="check" value="One"><label>One</label> <br/>
  <input type="checkbox" name="check" value="Two"><label>Two</label> <br/>
  <input type="checkbox" name="check" value="Three"><label>Three</label>
</div>
<div class="checkboxmsg">Only two options are allowed</div>