JavaScript - Anzahl der markierten Checkboxen anzeigen

<form method="post">



<p>

<label><input type="checkbox" name="test[]" value="1"> Option 1</label> <br>

<label><input type="checkbox" name="test[]" value="2"> Option 2</label> <br>

<label><input type="checkbox" name="test[]" value="3"> Option 3</label> <br>

<label><input type="checkbox" name="test[]" value="4"> Option 4</label> <br>

<label><input type="checkbox" name="test[]" value="5"> Option 5</label>

</p>



<div id="ausgabe">0</div>



</form>



<script>

// Anzahl der markierten Checkboxen anzeigen



let elem = document.querySelectorAll('[name="test[]"]');

elem.forEach((ele) => {



  ele.addEventListener("click", () => {


   let auswahl = document.querySelectorAll('input[name="test[]"]:checked');

   document.querySelector("#ausgabe").textContent = auswahl.length;

  });



});

</script>

Begrenzte Mehrfachauswahl

<p>

<div>max. Checkboxen</div>

<input id="max" type="number" value="2">

</p>



<ol>

<li><input class="checkers" type="checkbox" name="foobar[]"></li>

<li><input class="checkers" type="checkbox" name="foobar[]"></li>

<li><input class="checkers" type="checkbox" name="foobar[]"></li>

<li><input class="checkers" type="checkbox" name="foobar[]"></li>

<li><input class="checkers" type="checkbox" name="foobar[]"></li>

<li><input class="checkers" type="checkbox" name="foobar[]"></li>

<li><input class="checkers" type="checkbox" name="foobar[]"></li>

<li><input class="checkers" type="checkbox" name="foobar[]"></li>

<li><input class="checkers" type="checkbox" name="foobar[]"></li>

<li><input class="checkers" type="checkbox" name="foobar[]"></li>

</ol>



<script>

var boxes = document.querySelectorAll('.checkers');

var checkedCount = 0;



boxes.forEach((i) => {

 i.addEventListener('click', function(e) {



  let maxChecks = document.querySelector('#max').value;

  checkedCount = document.querySelectorAll('.checkers:checked').length;

 

  if (checkedCount > maxChecks) {

   this.checked = false;

  }


  });


});

</script>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<ins> Logische Auszeichnung

CSS - Modal-Fenster mit HTML5 und CSS

PHP - Wort in einem Text markieren

JavaScript - Geladenes Stylesheet austauschen

MySQL - Abrufen eines zweispaltigen Ergebnisses in ein Array