JavaScript - Anzahl der markierten Checkboxen anzeigen





0

<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

max. Checkboxen


<p>

<
div>maxCheckboxen</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.

<!-- --> Kommentar

CSS - Diagonaler Streifen-Effekt

PHP - Variable auf Buchstaben und Zahlen prüfen

JavaScript - Trinitätsoperator

MySQL - Zeige Einträge von heute an