checkbox mit onclick->$(this) statt id selektieren klappt nicht

[paco]

Hallo,
ich möchte ein formular um ein hidden field erweitern wenn jemand eine checkbox anklickt.

klappt auch wenn ich die checkbox mit id selektiere (ist jquery, aber die frage dürfte ja auch für normales javascript gelten):

function addfield() {
      if($('#checkbox').is(':checked')) {
            $('div').parent(this).append(*hiddenfield*);
      }
}

<input type="checkbox" (id="checkbox") onclick="addfield()" />

wenn ich die Funktion folgendermaßen ändere passiert nichts mehr:
...
if(this).is(':checked')
...

Geht das überhaupt? Dass man mit "this" das gerade angeklickte Element als selektor wählt?

Dankeschön,

Paco

[Beat]

function addfield() {
      if($('#checkbox').is(':checked')) {
            $('div').parent(this).append(*hiddenfield*);
      }
}

<input type="checkbox" (id="checkbox") onclick="addfield()" />

wenn ich die Funktion folgendermaßen ändere passiert nichts mehr:
...
if(this).is(':checked')
...

Geht das überhaupt? Dass man mit "this" das gerade angeklickte Element als selektor wählt?

this bezieht sich auf das Objekt, an welches eine Funktion gebunden wird.
Bei inline Javascript bezieht sich this auf das Element, dem der Eventhandler zugewiesen wird. this muss aber explizit übergeben werden:

<input type="checkbox" (id="checkbox") onclick="addfield(this)" />

ohne inline-JS

document.getElementById('checkbox').onclick=function(this){  
  if(this.checked == true) this.parentElement.appendChild( /* someelement*/ );  
};

mfg Beat

[paco]

Hallo Beat, vielen Dank!

<input type="checkbox" (id="checkbox") onclick="addfield(this)" />

Ahh verstehe. Das macht sinn. Wie ist denn die Syntax, wenn ich der Funktion noch zusätzliche Variablen mitgeben möchte?
also quasi onclick="addfield(this, 'variable1', 'variable2')"

function addfield(this(?), v1, v2))
   if(this.checked == true) this.parentElement.appendChild(
       /* formfeld mit v1 und v2 */
      )

Dankeschön,
Paco

[Cheatah]

Hi,

also quasi onclick="addfield(this, 'variable1', 'variable2')"

function addfield(this(?), v1, v2))

this ist ein festgelegtes Keyword, dass kannst Du also nicht als Variablennamen festlegen. Im Funktionskopf stehen Variablennamen. Du könntest also beispielsweise

function addfield(flubberdibubber, v1, v2)

festlegen und anschließend in der Funktion flubberdibubber ansprechen.

Cheatah

[paco]

Hi Cheatah,
das hab ich schon begriffen. Was ich eigentlich machen möchte ist sowas:

<input type="checkbox" onclick="test(var1)">

function test() {
      if($this).is(':checked')) {
            alert("Yipiii!"+var1);
      }
}

Ich dachte halt, dass wenn ich die Funktion innerhalb eines Elementes aufrufe, ich in der Funktion mit $(this) darauf referenzieren kann. Also dass sich in dem Beispiel oben das $(this) automatisch auf das input-element bezieht.

Das meinte Beat ja auch, nur dass ich es initialisieren muß. also onclick=test(this). Aber wie bekomm ich dann noch meine var1 mit unter?

fragt sich:
paco

[Cheatah]

Hi,

<input type="checkbox" onclick="test(var1)">
function test() {
      if($this).is(':checked')) {
            alert("Yipiii!"+var1);
      }
}

woah, hier geht mit Variablen und Werten so einiges durcheinander.

Ich dachte halt, dass wenn ich die Funktion innerhalb eines Elementes aufrufe, ich in der Funktion mit $(this) darauf referenzieren kann. Also dass sich in dem Beispiel oben das $(this) automatisch auf das input-element bezieht.

Sofern Du in jQuery-Methoden Funktionen referenzierst - beispielsweise mittels jQuery.each(function() { ... }) - wird der Kontext (also das this) innerhalb der jeweiligen Funktion durch jQuery erzeugt. Das könntest Du hier auch machen, allerdings willst Du den entsprechenden Code dazu gar nicht erst sehen. Verwende einfach this bei der _Übergabe_, benenne es bei der _Entgegennahme_ im Funktionskopf, und verwende die hiermit benannte Variable innerhalb der Funktion. An $(this) ist nichts Besonderes, es kann auch $(foobar) heißen, wenn eine Variable namens foobar existiert.

Das meinte Beat ja auch, nur dass ich es initialisieren muß. also onclick=test(this). Aber wie bekomm ich dann noch meine var1 mit unter?

Mit Komma.

Cheatah

[paco]

OMG!
Das funktioniert. Wahnsinn, hab gerade angefangen dir ausführlich zu beschreiben, was du, meiner Meinung nach, immer noch an meinem Problem mißverstanden hast. Zum Glück hab ichs nochmal ausprobiert. Mal wieder ein klassisches Wald-Baum-Phänomen..

Vielen Dank Cheatah und ihr anderen! Sowas ist schön kurz vor Feierabend :-)

Falls es sonst noch jemanden interessiert, so einfach funktioniert das bei mir:

<?php
echo '<input type="checkbox" onclick="test(this, '' . $var1 . '')" >';
?>

<script>
function test(papa, mama) {
if($(papa).is(':checked')) {
alert(mama);
}
}

Haha!

Schönen Abend

[molily]

Hallo,

Falls es sonst noch jemanden interessiert, so einfach funktioniert das bei mir:

<?php
echo '<input type="checkbox" onclick="test(this, '' . $var1 . '')" >';
?>

<script>
function test(papa, mama) {
if($(papa).is(':checked')) {
alert(mama);
}
}

Das ist ein schlechter Mix aus Low-level Inline-JavaScript und jQuery. Entscheide dich für eins. Am besten dafür, den Event-Handler zentral mit JavaScript zu registrieren und kein JavaScript im HTML-Code unterzubringen.

$(document).ready(function () {  
  $('ein Selektor, der die Checkbox anspricht').click(function () {  
    var checkbox = $(this);  
    …  
  });  
});

Und die Information aus $var1 bringst an einer sinnvollen Stelle unter, falls diese sich nicht ohnehin aus dem Namen oder Wert der Checkbox ergibt. Z.B. in einem data-Attribute: data-name="…", welches du mit data auslesen kannst.

Alle weiteren nötigen Daten lassen sich wahrscheinlich auch in dem click-Event-Handler in Erfahrung bringen.

Mathias

[Joachim]

Hi

Geht das überhaupt? Dass man mit "this" das gerade angeklickte Element als selektor wählt?

Nur wenn Du sowas baust:

myElement.onclick=function(){
   // this ist angeklicktes element
}

oder so:
$("#myElement").click(function(){
   // this ist angeklicktes element
   // $(this) ist Element als jquery Object
});

Gruesse, Joachim