Zählen Sie die Anzahl der aktivierten Kontrollkästchen in HTML

Lesezeit: 3 Minuten

Benutzer-Avatar
Roro

Also im Grunde möchte ich die Anzahl der Kontrollkästchen zählen, die angekreuzt sind. Ich bekomme meinen Code bis zu dem Punkt, an dem er sie erfolgreich zählt, aber ich möchte eine Warnung einfügen, die die Anzahl der angekreuzten Kontrollkästchen anzeigt, der Code tut dies, zeigt aber nicht die Gesamtzahl an, sondern erhöht die Gesamtzahl bei jeder Aktualisierung. Ich möchte nur wissen, wie ich eine Gesamtzahl anzeigen kann.

Es sollte die Gesamtsumme anzeigen, wenn auf das Optionsfeld „Ja“ geklickt wird.

<br />Apples
<input type="checkbox" name="fruit" />Oranges
<input type="checkbox" name="fruit" />Mango
<input type="checkbox" name="fruit" />
<br />Yes
<input type="radio" name="yesorno" id="yes" onchange="checkboxes()"
function checkboxes(){
    var inputElems = document.getElementsByTagName("input"),
    count = 0;
    for (var i=0; i<inputElems.length; i++) {
    if (inputElems[i].type === "checkbox" && inputElems[i].checked === true){
        count++;
        alert(count);
    }
}}

  • mögliches Duplikat des Kontrollkästchens Javascript-Anzahl aktiviert

    – John Conde

    8. April 2014 um 13:20 Uhr

  • andere Frage @JohnConde

    – Roro

    8. April 2014 um 13:23 Uhr

  • document.querySelectorAll('input[type="checkbox"]:checked').length

    – Paul S.

    8. April 2014 um 13:37 Uhr


Danke an Marlon Bernardes dafür.
alert(document.querySelectorAll('input[type="checkbox"]:checked').length);

Wenn Sie mehr als ein Formular mit jeweils unterschiedlichen Kontrollkästchennamen haben, zählt der obige Code alle Kontrollkästchen in allen Formularen.

Um dies zu überwinden, können Sie es so ändern, dass es nach Namen isoliert wird.

var le = document.querySelectorAll('input[name="chkboxes[]"]:checked').length;

  • Syntaxfehler: ‘Eingabe[name=”foo”]:checked’ ist kein gültiger Selektor (Firefox 57)

    – pbarney

    5. Januar 2018 um 4:22 Uhr

versuchen Sie dies mit jquery

Methode 1:

alert($('.checkbox_class_here :checked').size());

Methode 2:

alert($('input[name=checkbox_name]').attr('checked'));

Methode: 3

alert($(":checkbox:checked").length);

  • ja muss javascript

    – Roro

    8. April 2014 um 13:24 Uhr

  • Während dies ist Javascript, technisch gesehen, hat der Benutzer JQuery nicht erwähnt. Sie sollten nicht davon ausgehen, dass Benutzer eine Bibliothek verwenden, die sie nicht erwähnt haben.

    – Andreas Friseur

    8. April 2014 um 13:25 Uhr


  • Dies ist immer noch eine nützliche Antwort für diejenigen, die auf diese Frage gestoßen sind und jQuery verwenden. Es spielt keine Rolle, ob das OP es nicht erwähnt hat, die Antwort lautet “Versuchen Sie es mit …”.

    – Antony D’Andrea

    27. April 2016 um 9:40 Uhr

  • PS, für Methode 1 wird kein Leerzeichen zwischen :checked und dem Klassennamen benötigt.

    – Antony D’Andrea

    27. April 2016 um 9:42 Uhr

  • Verwenden Sie in der ersten Methode length anstelle von size() Veraltet

    – gondwe

    22. November 2020 um 13:56 Uhr


Benutzer-Avatar
Girisch

Versuchen Sie diesen Code

 <br />Apples
                <input type="checkbox" name="fruit" checked/>Oranges
                <input type="checkbox" name="fruit" />Mango
                <input type="checkbox" name="fruit" />

                <br />Yes
<input type="radio" name="yesorno" id="yes" onClick="checkboxes();" />

Javascript

     function checkboxes()
      {
       var inputElems = document.getElementsByTagName("input"),
        count = 0;

        for (var i=0; i<inputElems.length; i++) {       
           if (inputElems[i].type == "checkbox" && inputElems[i].checked == true){
              count++;
              alert(count);
           }

        }
     }

GEIGE-DEMO

  • ja muss javascript

    – Roro

    8. April 2014 um 13:24 Uhr

  • Während dies ist Javascript, technisch gesehen, hat der Benutzer JQuery nicht erwähnt. Sie sollten nicht davon ausgehen, dass Benutzer eine Bibliothek verwenden, die sie nicht erwähnt haben.

    – Andreas Friseur

    8. April 2014 um 13:25 Uhr


  • Dies ist immer noch eine nützliche Antwort für diejenigen, die auf diese Frage gestoßen sind und jQuery verwenden. Es spielt keine Rolle, ob das OP es nicht erwähnt hat, die Antwort lautet “Versuchen Sie es mit …”.

    – Antony D’Andrea

    27. April 2016 um 9:40 Uhr

  • PS, für Methode 1 wird kein Leerzeichen zwischen :checked und dem Klassennamen benötigt.

    – Antony D’Andrea

    27. April 2016 um 9:42 Uhr

  • Verwenden Sie in der ersten Methode length anstelle von size() Veraltet

    – gondwe

    22. November 2020 um 13:56 Uhr


Benutzer-Avatar
Arif

var checkboxes = document.getElementsByName("fruit");
for(i = 0 ; i<checkboxes.length; i++)
{
if(checkboxes[i].checked==0){checkboxes.splice(i,1);}
}
alert("Number of checked checkboxes: "+checkboxes.length);

1005830cookie-checkZählen Sie die Anzahl der aktivierten Kontrollkästchen in HTML

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy