zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Alle Checkboxen aktivieren/deaktivieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.06.2015, 09:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.12.2006
Beiträge: 37
RomanM befindet sich auf einem aufstrebenden Ast
Standard Alle Checkboxen aktivieren/deaktivieren

Hi,

bin schon etwas aus der Übung mit JavaScript, deswegen komme ich einfach nicht drauf, wo der Haken liegen soll.

In der Browserconsole wird immer "undefinied" angezeigt, wenn ich einen Wert ausgeben lassen möchte.

Ziel des Script soll sein, dass mit Klick auf einen Button, alle Checkboxen aktiviert bzw. deaktiviert werden sollen.


Das Codeschnipsel was mir vorliegt, ändert alle momentanen Zustände einfach um. Geplant ist jedoch, dass wenn mind. eine Checkbox aktiviert wurde, dass dann alle Felder deaktiviert und beim nächsten Klick alle Felder aktiviert werden.


Code:
function check()
  {
    var fields = document.forms["bestellung"].elements;

    for(var i=0; i<fields.length+1; i++)
      {
        var field = fields[i];
      
        if(field.type == 'checkbox')
          {
            if(field.checked == false)
              {
                field.checked = true;
              }
            else
              {
                field.checked = false;
              }
          }
      }
  }

  <form id="bestellung" action="" method="post">

    <input type="checkbox" name="bestellung[]" value="pizza" /><label>Pizza</label>
    <input type="checkbox" name="bestellung[]" value="eis"   /><label>Eis</label>
    <input type="checkbox" name="bestellung[]" value="obst"  /><label>Obst</label>

    <div onclick="check()">Check Button</div>

  </form>


Dann habe ich versucht mit einer Variablen n abzufragen, ob mind. 1 Feld aktiviert wurde, wenn ja, dann dechecke alle, ansonsten aktiviere alle. Leider ist die Funktion ohne Auswirkung.

Code:
for(var i=0; i<fields.length+1; i++)
  {
    var field = fields[i];
  
    var n;
    if(field.type == 'checkbox')
      {
        if(field.checked == true)
          {
            n++;
          }
      }
  }

alert(n);  // gibt nichts aus


for(var i=0; i<fields.length+1; i++)
  {
    var field = fields[i];

    if(field.type == 'checkbox')
      {
        if (n >=1) field.checked == false;
        else field.checked = true;
      }
  }

Vielleicht sieht jemand hier im Forum die Lösung.


Vielen Dank.

Roman

Geändert von RomanM (04.06.2015 um 09:57 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.06.2015, 11:00
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Da sind mehrere Fehler drin. Hier mal ein bessere Fassung:
Code:
<script>
function countCheckedFields(fields){
    var n = 0;
    for(var i=0; i < fields.length; i++){
        var field = fields[i];
        if(field.type.toLowerCase() == 'checkbox' && field.checked){
            n++;
        }
    }
    return n;
}    

function check(){
    var fields = document.forms["bestellung"].elements;
    var n = countCheckedFields(fields);
    alert(n);
    
    for(var i=0; i<fields.length; i++)
    {
        var field = fields[i];
        if(field.type == 'checkbox'){
            field.checked = !(n >=1)
        }
  }
}

</script>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.06.2015, 14:37
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.12.2006
Beiträge: 37
RomanM befindet sich auf einem aufstrebenden Ast
Standard

Genial, funktioniert! Vielen Dank!

Lag das jetzt an dem fields.length+1 in der for-Schleife?


So eine knappe if-Abfrage (ist doch eine, oder?)
Code:
field.checked = !(n >=1)
habe ich noch nie gesehen. Wie nennt sich solche kurze Schreibweise? Gibt es die auch in PHP?
Mit Zitat antworten
  #4 (permalink)  
Alt 04.06.2015, 15:03
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Nein, der Zugrosse Index war für dein Problem nicht relevant. Du hast n in der Schleife immer wieder neu intialisiert, das var n stand an der falsche Stelle.

und noch mal nein - das ist eine Typkonvertierung. Das Ausrufezeichen (ja es das gibt es auch in PHP) heißt "Nicht" (not) - es erzeugt das gegenteil des Vergleichs. Also wenn der Vergleich wahr ist, ist die Zuweisung false und umgekehrt. Wenn n größer 1 ist wahr ist, wird die Eigenschaft checked zu false.

Man hätte es auch so schreiben können:

Code:
field.checked = (n >=1) ? false : true;
Dann wäre es eine verkürzte if Abfrage.
Mit Zitat antworten
  #5 (permalink)  
Alt 04.06.2015, 19:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.12.2006
Beiträge: 37
RomanM befindet sich auf einem aufstrebenden Ast
Standard

Super, auch vielen Dank für die Erklärung, dann lerne sogar ich noch was auf meine alten Programmierertage.

Die Schreibweise "? false : true;" habe ich auch schon mal gesehen, wie nennt man denn diese verkürzte Schreibweise?
Mit Zitat antworten
  #6 (permalink)  
Alt 04.06.2015, 20:14
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Der heißt Konditional-Operator, es ist eine bedingte Zuweisung (im gegensatz zum if Befehl der nichts zuweisen kann)
https://de.wikibooks.org/wiki/Websit...ional-Operator
https://msdn.microsoft.com/en-us/library/e4213hs1.aspx
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Checkboxen per Ajax in ein Formular laden speedracer Javascript & Ajax 2 10.09.2011 19:37
formular tabindex mit checkboxen usw... sepp88 (X)HTML 6 13.01.2010 13:22
Liste (mit Checkboxen) in Spalten anzeigen nonce CSS 10 04.04.2009 20:45
Checkboxen in Tabelle verschieben sich im IE dooz CSS 4 03.06.2008 17:37
Checkboxen nebeneinander radon CSS 5 21.11.2006 00:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:30 Uhr.