Jan Wilkening: alertbox

Hallo. Habe da mal wieder eine tolle Anfängerfrage:
Wie schaffe ich es, dass sobald ein Haken in der Checkbox ist, dass eine Alertbox mit meinem WUnschtext erscheint:

<input type=checkbox id="chkList" >CheckBox 1
<input type=checkbox id="chkList" >CheckBox 2
<input type=checkbox id="chkList" >CheckBox 3

Kann mir da bitte einer helfen oder Seiten nennne bei denen cih mir Beispiele anschauen kann?
Danke im voraus
Jan

  1. Hallo Jan,

    <input type=checkbox id="chkList" >CheckBox 1
    <input type=checkbox id="chkList" >CheckBox 2
    <input type=checkbox id="chkList" >CheckBox 3

    ...wenn Du 3 Checkboxen hast, sollten die entweder alle die class="chkList" bekommen oder aber jede eine eigene ID - siehe dazu auch <http://de.selfhtml.org/html/attribute/allgemeine.htm@title=das hier>

    Kann mir da bitte einer helfen oder Seiten nennne bei denen ich mir Beispiele anschauen kann?

    Du kannst den Status der Checkboxen per Attribut "checked" abfragen, wie http://de.selfhtml.org/javascript/objekte/elements.htm#checked@title=hier erklärt.

    VG, sho

    1. Hallo sho.
      Danke für die schnelle Hilfe.
      Das von dir gezeigte Beispiel
      http://de.selfhtml.org/javascript/objekte/anzeige/elements_checked.htm
      gilt ja nur, wenn man den Button "starten" klickt.
      Geht so etwas auch ohne Button. Also nehmen wir mal an, dass der Haken durch eine andere Funtion selbständig in die Checkbox gesetzt wird.
      Dann soll eben sofort ein Alert aufgehen à la "Achtung, die Checkbox wurde aktiviert".
      Jan

      1. Hallo Jan,

        Geht so etwas auch ohne Button.

        Ja: dann musst Du einen Event Listener hinzufügen, der auf das Ereignis der Wertänderung "lauscht" :-)

        »»Also nehmen wir mal an, dass der Haken durch eine andere Funtion selbständig in die Checkbox gesetzt wird.

        Wie machst Du das denn, hast Du ein Stück Code? Wenn Du von Hand (also per Klick ins Kästchen) den Haken setzen würdest, könnte das so aussehen (click-Event müsstest Du dann durch deine Funktion/Aktion zum Setzen des Werts ersetzen):

        var fieldID = document.getElementById('ckList1'); //deine Checkbox

        fieldID.addEventListener('click',function(e){
            if(fieldID.checked){
                alert("Haekchen");
            }else{
                alert("kein Haekchen");
            }
        },false);

        VG, sho

        1. Also...
          Das ganze geschieht im Adminbereich bei Wordpress (CMS).
          Wenn man dort einen Artikel schreibt muss man den Artikel mittels Haken (checkbox) mit einer Kategorie verbinden. Nun gibt es eine Kategorie mit dem Namen DEFAULT. Ich möchte nun in zwei Fällen, dass ein Alert sich öffnet:

          Fall 1.
          Man klickt mit der Maus in die Checkbox der Kategorie 1

          Fall 2.
          Wenn man bei WP den Artikel abspeichert ohne eine Kategorie auszuwählen setzt Wordpress den Haken automatisch in die Checkbox der DEFAULT-Kategorie.
          In diesem Fall soll auch ein ALERT darauf hinweisen.

          Der Aufbau der Liste in WP sieht so aus:

          <ul id="categorychecklist" class="list:category categorychecklist form-no-clear">  
          <li id="category-4" class="popular-category">  
          <li id="category-3" class="popular-category">  
          <li id="category-2" class="popular-category">  
          <li id="category-1" class="popular-category">  
          </ul>
          

          In meinem Fall ist die DEFAULT-Kategorie diese hier: category-1

          Jan

          ps
          Habe deinen Code so angepasst:

          var fieldID = document.getElementById('category-1'); //deine Checkbox  
            
          fieldID.addEventListener('click',function(e){  
              if(fieldID.checked){  
                  alert("Haekchen");  
              }else{  
                  alert("kein Haekchen");  
              }  
          },false);
          

          Das brachte leider nichts.

        2. ..nur mal zum Testen:

            
          <!DOCTYPE html>  
          <html>  
          <head>  
            <title>Checkbox checken :-)</title>  
            
          <script type="text/javascript">  
           //deine Checkbox  
          function hoereAufCheckbox(){  
          var fieldID = document.getElementById('checker');  
          fieldID.addEventListener('click',function(e){  
              if(fieldID.checked){  
                  alert("Haekchen");  
              }else{  
                  alert("kein Haekchen");  
              }  
          },true); //hatte ich vorher versehentlich auf false  
          }  
          </script>  
          </head>  
          <body onload="hoereAufCheckbox()">  
          <input id="checker" type="checkbox" />  
          </body>  
          </html>  
          
          

          "nebenbei":(für den IE müsstest Du noch eine Browserweiche stellen und attachEvent statt addEventlistener benutzen)

          1. Hallo,

            Der Click-Event ist hier nicht besonders geeignet. Der Change-Event ist optimal.
            Die Events feuern meines Wissens aber nicht, wenn die ein value per Programm geändert wird.

            Gruß, Don P

            1. Der Click-Event ist hier nicht besonders geeignet. Der Change-Event ist optimal.

              jenau, das ist nur für den fall (zitat jan:
              "Ich möchte nun in zwei Fällen, dass ein Alert sich öffnet:
              Fall 1.
              Man klickt mit der Maus in die Checkbox der Kategorie 1"
              sinnvoll.

              Die Events feuern meines Wissens aber nicht, wenn die ein value per Programm geändert wird.

              Hm..hab ich jetzt nicht ausprobiert, aber müsste dann nicht das DOMAttrModified-Event greifen? Das feuert doch, wenn Attributsänderungen vom Skript vorgenommen wurden?

              Gruß, Don P
              VG, sho

              1. Also... ich habe das hier mal probiert. Das sieht eigentlich sehr gut aus.
                 Mein Problem ist es nun, dass ich keinen Zugriff auf den BODY-Tag in Wordpress habe. Ich kann da leider nicht den onload-Befehl einbinden.
                Gibt es die Möglichkeit das irgendwie anders aufzurufen?

          2. Also... ich habe das hier mal probiert. Das sieht eigentlich sehr gut aus. Mein Problem ist es nun, dass ich keinen Zugriff auf den BODY-Tag in Wordpress habe. Ich kann da leider nicht den onload-Befehl einbinden.
            Gibt es die Möglichkeit das irgendwie anders aufzurufen?