Checkboxen mit JS auslesen

[js]

Hallo susammen.

Ich hab festgestellt, wenn ich in meinem Programm Checkboxen in dieser Form (document.form.checkbox[nummer].checked) auslese, funktioniert das nur wenn ich mehr als 1ne Checkbox (mit dem gleichen Name) habe. Meine Frage ist nun ob dies normal ist, oder ich einen Fehler in zu suchen habe.

Weitere (möglicherweise) hilfreiche Infos. Die Checkboxen werden dynamisch mit Php erstellt und danach mit Javascript ausgelesen.

Vielen Dank und freundliche Grüsse

[jobo]

Hallo,

die Checkbox hat die Eigenschaft checked oder nicht. Wie Du sie ansprichst dabei egal. Ebenso, ob dein Quelltext von Hand oder von PHP erstellt wird.

  
<input type="checkbox" id="mybox">  

  
<script>  
myBox = document.getElementById("mybox");  
myBox.onclick = function() {  
	alert("Checkboxstatus: " + myBox.checked);  
}  
</script>  

Gruß

jobo

[Struppi]

<input type="checkbox" id="mybox">

> ~~~javascript
  

> <script>  
> myBox = document.getElementById("mybox");  
> myBox.onclick = function() {  
> 	alert("Checkboxstatus: " + myBox.checked);  
> }  
> </script>  
> 

Besser:

myBox.onclick = function() {  
 	alert("Checkboxstatus: " + this.checked);  
}  

Struppi.

[jobo]

Hallo Struppi,

Besser:

myBox.onclick = function() {

alert("Checkboxstatus: " + this.checked);
}

  
Ja, dieses "böse" "this". Bezieht sich dan innerhalb der Funktion auf "sich", also auf den "Vater", den "Eigentümer" der Funktion, das Element (/Objekt, zu dem die Funktion gehört)?  
Gruß  
  
jobo

[Struppi]

Ja, dieses "böse" "this". Bezieht sich dan innerhalb der Funktion auf "sich", also auf den "Vater", den "Eigentümer" der Funktion, das Element (/Objekt, zu dem die Funktion gehört)?

Genau. this ist immer der Kontext, in dem die Funktion aufgerufen wurde.

Struppi.

[jobo]

Hallo,

Ja, dieses "böse" "this". Bezieht sich dan innerhalb der Funktion auf "sich", also auf den "Vater", den "Eigentümer" der Funktion, das Element (/Objekt, zu dem die Funktion gehört)?

Genau. this ist immer der Kontext, in dem die Funktion aufgerufen wurde.

Gabs da nicht aber so irgendwie kontraintuitiven "Krempel" auch im Zusammenhang mit "Closures" (und einen Artikel von Dir)? Irgendwie habe ich immer ein bissel "Angst" (;-) vor this. Weil plötzlich ist es dann nicht mehr da (natürlich nur, wenn man den Kontext verlassen hat).

Gruß

jobo

[Struppi]

Ja, dieses "böse" "this". Bezieht sich dan innerhalb der Funktion auf "sich", also auf den "Vater", den "Eigentümer" der Funktion, das Element (/Objekt, zu dem die Funktion gehört)?

Genau. this ist immer der Kontext, in dem die Funktion aufgerufen wurde.

Gabs da nicht aber so irgendwie kontraintuitiven "Krempel" auch im Zusammenhang mit "Closures" (und einen Artikel von Dir)? Irgendwie habe ich immer ein bissel "Angst" (;-) vor this. Weil plötzlich ist es dann nicht mehr da (natürlich nur, wenn man den Kontext verlassen hat).

Besser Respekt, keine Angst ;-)

Klar in Closures verliert sich der Kontext, daher wird er in der Regel einfach in einer lokalen Variabeln kopiert um ihn dann in der Funktion zu nutzen. Das Problem taucht gerne mal auf bei Eventhandler die in einer Klasse zugewiesen werden.

Falsch!

function MyClass(id) {  
 var elm = document.getElementById(id);  
 elm.onclick = function() { this.tu_was(); }; // this == elm  
 this.tu_was = function() { alert('hallo');};  
}  

Richtig:

function MyClass(id) {  
 var elm = document.getElementById(id);  
 var _this = this;  
 elm.onclick = function() { _this.tu_was(); };  
 this.tu_was = function() { alert('hallo');};  
}  

Struppi.

[jobo]

Hallo,

Falsch!

function MyClass(id) {

var elm = document.getElementById(id);
elm.onclick = function() { this.tu_was(); }; // this == elm
this.tu_was = function() { alert('hallo');};
}

>   
> Richtig:  
> ~~~javascript

function MyClass(id) {  

>  var elm = document.getElementById(id);  
>  var _this = this;  
>  elm.onclick = function() { _this.tu_was(); };  
>  this.tu_was = function() { alert('hallo');};  
> }  
> 

Einen Hundetrainer hörte ich sagen sinngemäß: "Ich unterscheide nicht zwischen Angst und Respekt. Für den Hund ist das das gleiche. Bzw. hat er nur Respekt, wenn er auch Angst vor mir hat (hatte und deshalb haben könnte).

Bei deinem Beispiel ist es ja sehr logisch. In Fall eins bezieht sich im geschachtelten Kontext this dann auf seine nächsthöhere Zugehörigkeit. Egal, ob die (also "elm") nun wiederum nur in einem anderen Kontext existiert oder nicht. Will ich das umgehen, muss ich das "this" im umgebenden Kontext dann halt umkopieren, damit ich einen Namen dafür habe, um darauf im inneren Kontext zugreifen zu können. Wenn du aber "elm" vorher eine tu_was-Methode zugefügt hättest, hätte auch Variante eins ein Ergebnis (;-).

Gruß

jobo

[Der Martin]

Hallo,

Ich hab festgestellt, wenn ich in meinem Programm Checkboxen in dieser Form (document.form.checkbox[nummer].checked) auslese, funktioniert das nur wenn ich mehr als 1ne Checkbox (mit dem gleichen Name) habe.

gut beobachtet. ;-)

Meine Frage ist nun ob dies normal ist, oder ich einen Fehler in zu suchen habe.

Des g'hört so.[tm]

Enthält ein Formular nur *eine* Checkbox mit einem gegebenen Namen, kann diese Checkbox direkt wie jedes andere Formularelement angesprochen werden:

<form name="alterskontrolle" action="" method="get">  
 <input type="checkbox" name="adult"> Ich bin erwachsen.  
 <input type="button" onclick="ShowMe()">  
</form>  
  
<script type="text/javascript">

alert(document.alterskontrolle.adult.checked);
</script>

Enthält das Formular aber mehrere Checkboxen mit dem gleichen Namen, bilden die eine Gruppe, was in Javascript dadurch ausgedrückt wird, dass sie als Array angesprochen werden:

<form name="schulbildung" action="" method="get">  
 <input type="checkbox" name="schule"> Hauptschule  
 <input type="checkbox" name="schule"> Realschule  
 <input type="checkbox" name="schule"> Gymnasium  
 <input type="checkbox" name="schule"> Berufsschule  
 <input type="checkbox" name="schule"> Uni  
 <input type="button" onclick="ShowMe()">  
</form>  
  
<script type="text/javascript">

~~~javascript alert(document.alterskontrolle.schule[0].checked);
 alert(document.alterskontrolle.schule[1].checked);
 alert(document.alterskontrolle.schule[2].checked);
 alert(document.alterskontrolle.schule[3].checked);
 alert(document.alterskontrolle.schule[4].checked);

`</script>`{:.language-html}  
  

> Die Checkboxen werden dynamisch mit Php erstellt  
  
Das spielt keine Rolle.  
  
Ciao,  
 Martin  

-- 
Die späteren Ehen sind oft glücklicher als die erste, weil das natürliche Ende bereits absehbar ist.  
  (George Bernhard Shaw)  

[Kai345]

[latex]Mae  govannen![/latex]

Enthält das Formular aber mehrere Checkboxen mit dem gleichen Namen, bilden die eine Gruppe, was in Javascript dadurch ausgedrückt wird, dass sie als Array angesprochen werden:

Kleiner Einwurf: Nein, nicht als Array, sondern als NodeList bzw HTMLCollection.
Man kann zwar genau wie auf ein Array zugreifen, das Objekt verfügt aber nicht über die Array-Funktionen.

alert(typeof document.schulbildung.schule.pop);  
alert(typeof [1,2,3].pop); 

<form name="schulbildung" action="" method="get">

<input type="checkbox" name="schule"> Hauptschule
<input type="checkbox" name="schule"> Realschule
<input type="checkbox" name="schule"> Gymnasium
<input type="checkbox" name="schule"> Berufsschule
<input type="checkbox" name="schule"> Uni
<input type="button" onclick="ShowMe()">
</form>

<script type="text/javascript">

>  ~~~javascript

alert(document.alterskontrolle.schule[0].checked);  

>  alert(document.alterskontrolle.schule[1].checked);  
>  alert(document.alterskontrolle.schule[2].checked);  
>  alert(document.alterskontrolle.schule[3].checked);  
>  alert(document.alterskontrolle.schule[4].checked);

</script>

str_replace("alterskontrolle", "schulbildung", $obiges_beispiel);

Cü,

Kai

[Der Martin]

Hallo,

Enthält das Formular aber mehrere Checkboxen mit dem gleichen Namen, bilden die eine Gruppe, was in Javascript dadurch ausgedrückt wird, dass sie als Array angesprochen werden:
Kleiner Einwurf: Nein, nicht als Array, sondern als NodeList bzw HTMLCollection.

hmm, da das für die Programmier-Praxis bei mir noch nie einen Unterschied machte, habe ich mich auch noch nie bemüht, das zu unterscheiden.

Man kann zwar genau wie auf ein Array zugreifen, das Objekt verfügt aber nicht über die Array-Funktionen.

Aber man kann sie über einen Index ansprechen, kann darüber iterieren, und sie haben sogar eine length-Eigenschaft. Mehr verlange ich von einem Array auch nicht. ;-)

alert(document.alterskontrolle.schule[0].checked);

alert(document.alterskontrolle.schule[1].checked);
alert(document.alterskontrolle.schule[2].checked);
alert(document.alterskontrolle.schule[3].checked);
alert(document.alterskontrolle.schule[4].checked);

>   
> str\_replace("alterskontrolle", "schulbildung", $obiges\_beispiel);  
  
Typischer Copy&Paste Error, danke.  
  
Ciao,  
 Martin  

-- 
Wenn man sieht, was der liebe Gott auf der Erde so alles zulässt, hat man das Gefühl, er experimentiert immer noch.  
  (Sir Peter Ustinov, Charakterdarsteller, 2004 verstorben)  

[js]

Das ist schad, denn die Anzahl von Checkboxen variiert von Aufruf zu Aufruf, somit könnten es 1ne oder auch 100erte vom gleichen Namen sein. Aber es ist  nicht so tragisch, ich könnte nun einfach zwei Ausleseverfahren machen, oder standarmässig eine dummy-Checkbox einfügen...

vielen Dank für die Antworten