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 Bausteinen (Codeschnipsel) aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<b> Hervorheben (Physische Auszeichnung)

CSS - Kalender Symbol neben dem Datepicker

PHP - Verzeichnisgröße auslesen

JavaScript - JavaScript-Version des Browsers anzeigen

MySQL - Eintrag überschreiben