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.

<html> HTML

CSS - Position Sticky in einer HTML Tabelle

PHP - Negative Zeichenketten Angaben

JavaScript - Ausgabe des aktuellen Datums mit Monats- und Tagesnamen

MySQL - Einfügen oder aktualisieren mit 'ON DUPLICATE KEY UPDATE'

Plug-ins nötig
Man muss schon einen guten Grund haben, um ein Plug-ins (Browser-Erweiterung) zu rechtfertigen. Denn oft haben die Besucher das entsprechende Plug-in nicht und wollen es auch nicht runterladen, abgesehen davon, dass viele Besucher gar nicht wissen, was ein PlugIn ist. Wenn man trotzdem nicht auf Plug-in verzichten möchte, sollte man zumindest eine Alternative anbieten, sonst bekommen viele potenzielle Besucher die Seite nicht zu sehen.