Ankündigung

Einklappen
Keine Ankündigung bisher.

Javascript Checkbox Auswahl limitieren

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Javascript Checkbox Auswahl limitieren

    Hallo,
    ich würde gerne in einem Formular die anzahl der möglichen Checkbox-Markierungen limitieren.
    Ich habe bereits mehrere Lösungsansätze gefunden und auch fertige script, jedoch funktionieren diese leider irgendwie alle nicht bei mir. Ich weiß nicht ob es am Formular liegt.
    Ich würde gerne ohne jQuery auskommen, da ich für den kleinen schnipsel nicht noch eine ganze Library einladen möchte.

    Vielen Dank euch im Voraus!

    HTML-Code:
    <form method="post" name="categories" id="categories" action="#">
        <div>
            <ul style="list-style-type: none;">
                <li><label><input type="checkbox" class="choose-category" name="categories[]" value="1">Category 1</label></li>
                <li><label><input type="checkbox" class="choose-category" checked="" name="categories[]" value="94">Category 2</label></li>
                <li><label><input type="checkbox" class="choose-category" name="categories[]" value="91">Category 3</label></li>
                <li><label><input type="checkbox" class="choose-category" name="categories[]" value="90">Category 4</label></li>
                <li><label>Category 5</label></li>
                    <ul style="list-style-type: none;">
                        <li><label><input type="checkbox" class="choose-category" name="categories[]" value="93">Category 10</label></li>
                    </ul>
                <li><label><input type="checkbox" class="choose-category" checked="" name="categories[]" value="89">Category 6</label></li>
                <li><label><input type="checkbox" class="choose-category" name="categories[]" value="88">Category 7</label></li>
                <li><label><input type="checkbox" class="choose-category" checked="" name="categories[]" value="86">Category 8</label></li>
                <li><label><input type="checkbox" class="choose-category" name="categories[]" value="92">Category 9</label></li>        
                </ul>
        </div>
        <input type="submit" value="submit" name="Submit">
    </form>

  • #2
    ich würde gerne in einem Formular die anzahl der möglichen Checkbox-Markierungen limitieren.
    verstehe ich nicht, checkbox kennt doch nur an oder aus ...


    Kommentar


    • #3
      Deine Liste ist nicht valide das innere UL benötigt als parent ein li...

      Kommentar


      • #4
        Zitat von tomBuilder Beitrag anzeigen
        verstehe ich nicht, checkbox kennt doch nur an oder aus ...
        Genau und ich möchte limitieren wie viele an sein dürfen.

        Zitat von kaminbausatz Beitrag anzeigen
        Deine Liste ist nicht valide das innere UL benötigt als parent ein li...
        Das stimmt, jedoch ändert das doch nichts an der funktionalität der Begrenzung.

        Wäre über einen Lösungsansatz sehr dankbar,

        Kommentar


        • #5
          Zitat von Firehold
          Ich habe bereits mehrere Lösungsansätze gefunden und auch fertige script, jedoch funktionieren diese leider irgendwie alle nicht bei mir. Ich weiß nicht ob es am Formular liegt.
          Zitat von kaminbausatz
          Deine Liste ist nicht valide das innere UL benötigt als parent ein li...
          Zitat von Firehold Beitrag anzeigen
          Das stimmt, jedoch ändert das doch nichts an der funktionalität der Begrenzung.
          Wenn du invalides HTML hast, kann das sehr wohl ein Grund sein das es mit JavaScript nicht funktioniert. Mach mal ein jsfiddle und zeit deinen Ansatz, dann kann man über was konkretes reden.

          BTW: Erster Treffer - ohne jQuery: https://www.roytuts.com/limit-number...ng-javascript/

          LG
          The string "()()" is not palindrom but the String "())(" is.

          Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
          PHP.de Wissenssammlung | Kein Support per PN

          Kommentar


          • #6
            ermitteln der Anzahl, der ausgewählten checkboxen
            HTML-Code:
            <!DOCTYPE html>
            <head lang="de">
            <meta  charset="utf-8">
            <title>Test</title>
            </head>
            <body>
            <form id="select_cat">
                <label><input type="checkbox" name="category[]" value="1">Category 1</label>
                <label><input type="checkbox" name="category[]" value="94">Category 2</label>
                <label><input type="checkbox" name="category[]" value="91">Category 3</label>
                <label><input type="checkbox" name="category[]" value="90">Category 4</label>
                <label><input type="checkbox" name="category[]" value="93">Category 5</label>
                <label><input type="checkbox" name="category[]" value="89">Category 6</label>
                <label><input type="checkbox" name="category[]" value="88">Category 7</label>
                <label><input type="checkbox" name="category[]" value="86">Category 8</label>
                <label><input type="checkbox" name="category[]" value="92">Category 9</label>        
                <input type="submit" value="submit" name="submit">
            </form>
            <script>
            select_cat.oninput=()=>{
                alert(document.querySelectorAll('input[type="checkbox"]:checked').length);
            }
            </script>
            </body>
            </html>

            Kommentar


            • #7
              Vielen Dank protestix, allerdings möchte ich vorerst nicht die anzahl auslesen, sondern die auswahl begrenzen.

              Hier das Formular mit dem bisherigen code hausl

              https://jsfiddle.net/4320vhqs/

              Vielen Dank euch für eure Hilfe!!!

              Kommentar


              • #8
                Wenn du die Auswahl begrenzen willst, musst du doch wissen wie viele ausgewählt wurden, dazu muss die diese zahlen und dazu dient das Schnipsel, den Rest programmierst du.

                Kommentar

                Lädt...
                X