Rainer: Checkbox Wert in Array übergeben / entfernen

Hallo,

bei der nachfolgenden Funktion bin ich hartnäckig gescheitert.
Jede der drei Checkboxen soll beim Anklicken jeweils ihren Wert in ein Array übergeben und beim Deaktivieren dieser Wert wieder aus dem Array entfernt werden.

Den Übertrag in das Array habe ich ja mit daten.push(wert) hinbekommen, allerdings wurde der Wert natürlich jedesmal beim Anklicken übertragen. Hier fehlt also eine Statusabfrage, ob der Wert sich bereits im Array befindet. Und an diesem Punkt komme ich nicht weiter - und bin in einer geistigen Endlosschleife.

Wer hilft mir auf die Sprünge?

Mfg Rainer

-------------------------------------------------------------------------------------------------

<html>
<head>
<script type="text/javascript">
<!--
var daten = new Array();
function treffe_auswahl(wert)
{
//
Aktiviere Checkbox: ihr Wert wird in das Array "daten" übertragen
Deaktiviere Checkbox: ihr Wert wird aus dem Array "daten" entfernt
//
}
//-->
</script>
</head>
<body>
<form name="formular">
<input type="checkbox" name="checkbox1" value="checkbox1" onclick="treffe_auswahl(this.value)">
<input type="checkbox" name="checkbox2" value="checkbox2" onclick="treffe_auswahl(this.value)">
<input type="checkbox" name="checkbox3" value="checkbox3" onclick="treffe_auswahl(this.value)">
</form>
</body>
</html>

  1. bei der nachfolgenden Funktion bin ich hartnäckig gescheitert.
    Jede der drei Checkboxen soll beim Anklicken jeweils ihren Wert in ein Array übergeben und beim Deaktivieren dieser Wert wieder aus dem Array entfernt werden.

    Den Übertrag in das Array habe ich ja mit daten.push(wert) hinbekommen, allerdings wurde der Wert natürlich jedesmal beim Anklicken übertragen. Hier fehlt also eine Statusabfrage, ob der Wert sich bereits im Array befindet. Und an diesem Punkt komme ich nicht weiter - und bin in einer geistigen Endlosschleife.

    Am einfachsten ist es, ein Objekt als assoziatives Array zu verwenden. Da jedes Objekt eine Eigenschaft nur einmal haben kann, kannst du einfach dieses einfügen

    var daten = new Object();
    function treffe_auswahl(wert)
    {
    daten[wert] = true;
    }

    Struppi.

    1. Am einfachsten ist es, ein Objekt als assoziatives Array zu verwenden. Da jedes Objekt eine Eigenschaft nur einmal haben kann, kannst du einfach dieses einfügen

      var daten = new Object();
      function treffe_auswahl(wert)
      {
      daten[wert] = true;
      }

      Hallo Struppi,

      verstanden habe ich das leider noch nicht ganz, und mit der entsprechenden Quelle http://de.selfhtml.org/javascript/objekte/array.htm habe ich auch so meine Probleme.

      Kannst Du mir deinen Lösungsansatz vielleicht noch etwas erklären ?
      Würde ich sehr über eine ntwort freuen und sage schon mal - in jedem Fall - herzlichen Dank.

      Mfg Rainer

      1. Am einfachsten ist es, ein Objekt als assoziatives Array zu verwenden. Da jedes Objekt eine Eigenschaft nur einmal haben kann, kannst du einfach dieses einfügen

        var daten = new Object();
        function treffe_auswahl(wert)
        {
        daten[wert] = true;
        }

        Hallo Struppi,

        verstanden habe ich das leider noch nicht ganz, und mit der entsprechenden Quelle http://de.selfhtml.org/javascript/objekte/array.htm habe ich auch so meine Probleme.

        Kannst Du mir deinen Lösungsansatz vielleicht noch etwas erklären ?

        Also daten wird als Objekt deklariert, damit hast du die Möglichkeit diesem beliebige Eigenschaften zu geben.

        var daten = {}; // Die geschweifte Klammer ist ungefähr das Gleiche wie new Object()

        daten.eigenschaft = 'wert';

        auch z.b. Funktionen:

        daten.func = function() { alert( this.eigenschaft ); };

        Aufgerufen wird sie so:

        daten.func();

        In deinem Fall ist es auch noch wichtig zu Wissen, wie du alle Eigenschaft abfragst, dazu existiert for(var eigenschaft in objekt)

        Also:

        for(var eigenschaft in daten) alert(eigenschaft );

        Ich hoffe ich konnte dich ein wenig erhellen.

        Struppi.

        1. Ufff,es klärt sich ... gaaaanz langsam.
          Herzlichen Dank nochmals, ab jetzt muss ich alleine durch.Seufz.

          Rainer

  2. hi,

    Hier fehlt also eine Statusabfrage, ob der Wert sich bereits im Array befindet. Und an diesem Punkt komme ich nicht weiter - und bin in einer geistigen Endlosschleife.

    Durchlaufe das Array in einer Schleife, und vergleiche jeden Wert mit dem gesuchten. Wenn du ihn gefunden hast, steige mit diesem Ergebnis aus der Schleife aus.
    Wenn du ihn nach der Schleife nicht gefunden hast, vermerke dies als Ergebnis.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
  3. gruss Rainer.

    bei der nachfolgenden Funktion bin ich hartnäckig gescheitert.
    Jede der drei Checkboxen soll beim Anklicken jeweils ihren Wert in ein Array
    übergeben und beim Deaktivieren dieser Wert wieder aus dem Array entfernt
    werden.

    wahsagas vorschlag aufgreifend und unter zuhilfenahme der methode
       "remove" eines aufgebohrten Array-Konstruktors -

    http://www.pseliger.de/jsExtendedApi/jsApi.Array.normalize.dev.js
       http://www.pseliger.de/jsExtendedApi/jsApi.Array.normalize.js

    - saehe eine moegliche loesung folgendermassen aus:

    ~~~javascript var daten = new Array();

    function treffe_auswahl (control) {
         if (control.checked) {
           daten.push(control.value); // Wert wird in das Array "daten" übertragen;
         } else {
           daten.remove(control.value); // Wert wird aus dem Array "daten" entfernt;
         }
       }

      
       mit einer leichten aenderung im html-code:  
      
       ~~~html
    <form name="formular">  
         <input type="checkbox" name="checkbox1" value="checkbox1" onclick="treffe_auswahl(this)">  
         <input type="checkbox" name="checkbox2" value="checkbox2" onclick="treffe_auswahl(this)">  
         <input type="checkbox" name="checkbox3" value="checkbox3" onclick="treffe_auswahl(this)">  
       </form>
    

    by(t)e by(t)e - peterS. - pseliger@gmx.net

    --
    "Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
    Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive." - Douglas Crockford
    ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]
    1. Hy Peter,

      das wäre - um es vorneweg zu sagen - wirklich eine elegante schöne Lösung gewesen. ABER: genau am entscheidenden Punkt - daten.remove(control.value) - passiert eben genau dieses nicht.

      Beim Anklicken werden die Werte ins Array "daten" aufgenommen, aber beim "entchecken" nicht wieder rausgenommen - wie die Ausgabe per alert zeigt.

      Über "remove" habe ich in meiner Literatur hier auf die Schnelle leider nichts gefunden.

      Wo liegt der "Casus Cnactus" ???!!!

      Grüße von Rainer

      ----------------------------------

      <html>
      <head>
      <title>&nbsp;</title>
      <script type="text/javascript">
      <!--
      var daten = new Array();

      function treffe_auswahl(control)
      {
      if (control.checked)
      {
      daten.push(control.value);
      }
      else
      {
      daten.remove(control.value);
      }
      alert(daten);
      }

      //-->
      </script>
      </head>
      <body>
      <center>
      <form name="formular">
      <input type="checkbox" name="checkbox1" value="checkbox1" onclick="treffe_auswahl(this)">
      <input type="checkbox" name="checkbox2" value="checkbox2" onclick="treffe_auswahl(this)">
      <input type="checkbox" name="checkbox3" value="checkbox3" onclick="treffe_auswahl(this)">
      </form>
      </center>
      </body>
      </html>

      1. Wo liegt der "Casus Cnactus" ???!!!

        Ich kann zwar kein Latein, aber..

        remove ist eine Erweiterung von Peter und nicht per Standard vorhanden. Sie ist in einer der beiden Dateien die deren Link er gepostet hat.

        Struppi.

        1. Nur verschlüsselte Botschaften lassen genug Raum für Missverständnisse.

          Unknackbar!

          Struppi, es geht zur Nacht, ich gebe auf.

      2. hallo again Rainer,

        ... genau am entscheidenden Punkt - daten.remove(control.value) -
        passiert eben genau dieses nicht.
        ...
        Über "remove" habe ich in meiner Literatur hier auf die Schnelle
        leider nichts gefunden.
        ...

        zu "Array.remove" wirst Du dort auch nichts finden. in JavaScript
           darf man die objekte des sprachkerns gerne um methoden erweitern,
           die einem sinnvoll/komfortabel/nuetzlich erscheinen.
           bei der von mir genannten und auch verlinkten array-methode "remove"
           handelt es sich um genausoeine erweiterung.
           binde die zeile "Array.prototype.remove = function (obj) {...};"
           in Dein script ein, und jedem von Dir verwendeten array-objekt steht
           diese methode nunmehr zur verfuegung.

        so long - peterS. - pseliger@gmx.net

        --
        "Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
        Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive." - Douglas Crockford
        ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]
        1. Hy PeterS,

          dank, dass du dich der Sache nochmal zugewandt hast!

          Leider reicht hier wohl mein Grundlagenwissen nicht mehr aus. Ich kriege Deinen Hinweis nicht umgesetzt. Zu viele Unbekannte im Spiel,
          um mir die Materie wenigstens über "try and error" anzueignen ....

          Niederlage.Schluchz.

          Mfg Rainer

          1. gruss Rainer

            ... Zu viele Unbekannte im Spiel, um mir die Materie wenigstens über
            "try and error" anzueignen ....

            Niederlage.Schluchz.

            glaub ich nicht - wenn doch, dann richtet dich die lektuere des folgenden
               funktionstuechtigen und umfassend kommentierten beispiels ja vielleicht
               doch noch auf.

            achtung! code:

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
            <html>  
              
              <head>  
                <title>prove-of-concept-array-check-in-or-out.html</title>  
                <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
                <meta http-equiv="content-script-type" content="text/javascript">  
                <script type="text/javascript">  
            
            ~~~~~~JavaScript
                /*  
                  der folgende funktionsblock erweitert das prototype-objekt des zum  
                  sprachkern gehoerenden "Array"-konstruktors um die methode "remove".  
              
                  allgemeinverstaendlich formuliert bedeutet dies, dass allen hier  
                  je erzeugten array-objekten zusaetzlich zu den standardmethoden  
                  auch noch die methode "remove" zur verfuegung steht.  
                */  
                  Array.prototype.remove = function(obj) {  
                    var arr = this, i = 0;  
                    while (i<arr.length) {  
                      if (arr[i] === obj) {  
                        arr = arr.slice(0,i).concat(arr.slice(i+1,arr.length));  
                        --i;  
                      }  
                      ++i;  
                    }  
                    for (i=0; i<arr.length; ++i) {  
                      this[i] = arr[i];  
                    }  
                    this.length = arr.length;  
                  };  
                //Array.prototype.remove = function(obj) {var arr=this,i=0;while(i<arr.length){if(arr[i]===obj){arr=arr.slice(0,i).concat(arr.slice(i+1,arr.length));--i;}++i;}for(i=0;i<arr.length;++i){this[i]=arr[i];}this.length=arr.length;};  
              
                /*  
                  der zweite block enthaelt das globale array "checkboxData".  
                  dieses array "kennt" die methode "remove".  
              
                  die richtigkeit des konzepts laesst sich anhand der arbeitsweise  
                  der funktion "checkInOrOut" ueberpruefen.  
                  jeder klick auf eine checkbox ruft diese funktion auf. das einzige  
                  funktionsargument ist die referenz auf die gerade geklickte checkbox.  
                  wurde die checkbox abgehakt, wird der wert dieser box dem globalen  
                  array "checkboxData" hinzugefuegt; anderenfalls wird dieser wert  
                  wieder aus ebenjenem array entfernt. damit die im array stehenden  
                  aktuellen werte auch noch schoen angezeigt werden koennen, wird  
                  das array vor seiner ausgabe nocheinmal schnell sortiert.  
                */  
                  var checkboxData = []; // new Array(); // konstruktor;  
              
                  var checkInOrOut = function (control) {  
                    var dataTrace = document.forms["checkboxes"].elements["traceLine"];  
                    if (control.checked) {  
                      checkboxData.push(control.value); // check value in;  
                    } else {  
                      checkboxData.remove(control.value); // remove value;  
                    }  
                    checkboxData.sort();  
                    dataTrace.value = ((checkboxData.toSource) ? (checkboxData.toSource()) : (checkboxData.toString()));  
                  };  
            
            ~~~~~~html
                </script>  
              </head>  
              
              <body>  
                <p>proof-of-concept-array-check-in-or-out.html</p>  
                <form name="checkboxes" action="" method="get">  
                  <input type="text" name="traceLine" size="38" disabled><br><br>  
                  <label for="checkbox1">  
                    <input type="checkbox" name="checkbox1" id="checkbox1" value="checkbox1" onclick="checkInOrOut(this)">  
                    value=&quot;checkbox1&quot;  
                  </label><br>  
                  <label for="checkbox2">  
                    <input type="checkbox" name="checkbox2" id="checkbox2" value="checkbox2" onclick="checkInOrOut(this)">  
                    value=&quot;checkbox2&quot;  
                  </label><br>  
                  <label for="checkbox3">  
                    <input type="checkbox" name="checkbox3" id="checkbox3" value="checkbox3" onclick="checkInOrOut(this)">  
                    value=&quot;checkbox3&quot;  
                  </label><br>  
                </form>  
              </body>  
            </html>
            

            gute nacht - peterS. - pseliger@gmx.net

            --
            "Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
            Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive." - Douglas Crockford
            ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]
            1. glaub ich nicht - wenn doch, dann richtet dich die lektuere des folgenden
                 funktionstuechtigen und umfassend kommentierten beispiels ja vielleicht
                 doch noch auf.

              E S  M A C H T S !!!! E S  M A C H T S !!!!

              Wenn ich eine Tussi wär, würd ich sagen: Du bist ein Schatz! :-)
              Aber weil ich keine Tussi bin sag ich: Du kannst stolz auf Dich sein.

              Und dann hast Du Dir auch noch an meiner Stelle die Nacht um die Ohren gehauen!

              Von meiner Seite fest versprochen: kein schnödes "Copy&Paste"!
              Zum Einsatz kommt die Sache erst, wenn ich sie durchdrungen habe.

              Nochmals vielen Dank.

              Rainer

              1. hallo again Rainer,

                Und dann hast Du Dir auch noch an meiner Stelle die Nacht um die Ohren
                gehauen!

                mach Dir da mal keine sorgen. ich war noch spaet aus und wollte vor
                   dem insbettgehen diese sache hier einfach vom tisch haben. wenn es
                   Dich beruhigt - das ganze hat keine halbe stunde in anspruch genommen.

                schoenes wochenende - peterS. - pseliger@gmx.net

                --
                "trim-methoden mit regulaeren ausdruecken umgesetzt als string-prototypen
                 sind ganz gut zum kostenlosen anfixen geeignet, denke ich ;-)" - peterS.
                 http://forum.de.selfhtml.org/archiv/2005/5/t106876/#m663768
                ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]
                1. Hallo again Peter,

                  habe Deine Idee absorbiert und etwas eingedampft - bin ganz schön fix mit dem Lernen, ne ? Was hälts du davon ... ?

                  Ausch ein Schönes Mfg Rainer

                  -------------------------------------

                  <script type="text/javascript">
                  <!--

                  var daten = new Array();

                  function treffe_auswahl(auswahl)
                  {

                  i = 0;

                  if (auswahl.checked)
                  {
                  daten.push(auswahl.value);
                  }
                  else
                  {
                  while (i < daten.length)
                  {
                  if (daten[i] == auswahl.value)
                  daten.splice(i,1);
                  i++;
                  }
                  }
                  daten.sort();
                  alert(daten);
                  }

                  //-->
                  </script>

                2. hallo again Peter,

                  habe deine Idee absorbiert und etwas eingedampft. Lerne fix, ne?
                  Was hältst Du davon ?

                  Dir auch ein Schönes ! :-) Mfg Rainer

                  <script type="text/javascript">
                  <!--

                  var daten = new Array();

                  function treffe_auswahl(auswahl)
                  {

                  i = 0;

                  if (auswahl.checked)
                  {
                  daten.push(auswahl.value);
                  }
                  else
                  {
                  while (i < daten.length)
                  {
                  if (daten[i] == auswahl.value)
                  daten.splice(i,1);
                  i++;
                  }
                  }
                  daten.sort();
                  alert(daten);
                  }

                  //-->
                  </script>

                  1. gruss Rainer,

                    habe deine Idee absorbiert und etwas eingedampft.

                    jo

                    ... Lerne fix, ne?

                    jo

                    Was hältst Du davon ?
                    ...

                    das sieht doch recht brauchbar und schlank aus, sollte am gegebenen
                       bsp. ohne probleme funktionieren und ist mit dieser art der umsetzung
                       am naechsten an wahsagas vorschlag dran.

                    gute nacht - peterS.

                    --
                    "Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
                    Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive." - Douglas Crockford
                    ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]