JavaScript checkbox - Status (checked) wird nicht erkannt

[CitroenDsVier]

Hallo zusammen,

ich habe folgendes Problem: meine Checkbox, die mittels onMouseUp Event eine js function triggert (das Ganze über jQuery zu triggern wäre sicherlich schöner, i know), ist laut js dauerhaft checked.

folgender html & js code:

<input type="checkbox" onMouseUp="checkbox( php code... )" />

...

function checkbox(id) {
   if($(this).checked) {
      console.log("checked");
   } else {
      console.log("not checked");
   }
}

Meine Erwartung war, dass beim doppelten anklicken einer Checkbox erst "not checked" und dann "checked" ausgegeben wird. Stattdessen erhalte ich 2x "not checked". Weshalb?

MfG, V40

 

[WhiteShark]

Versuchs mal mit

if($(this).is(':checked')) {

 

[CitroenDsVier]

Leider kein Unterschied. Mit dem Debugger aus Firefox kann ich aber sehen, dass die checkbox unter dem Attribut checked abwechselnd true und false stehen hat.

Ergänzung (13. Dezember 2016)

kann ich mir irgendwie ausgeben, was in this.checked steht? mit console.log(this.checked) erhalte ich immer ein "undefined" (egal ob mit oder ohne jQuery - $() )?

Ergänzung (13. Dezember 2016)

okay, deine Möglichkeit @WhiteShark liefert auf jeden Fall dauerhaft false. Vielleicht ist der Zeitpunkt des triggerns der Funktion falsch gewählt? onClick() ändert aber auch nichts...

 

[r0b0t]

Dann ist this in deinem Fall halt undefined und das erklärt das Verhalten. Schau mal hier über die Belegung von this nach:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

 

[CitroenDsVier]

nein, an this liegt es nicht. Ich habe die function testweise über jQuery und das Event hover getriggert und erhalte dauerhaft ein false - egal, ob die checkbox checked ist oder nicht.

Das Problem, dass man nicht weiß, ob die function vor oder nach Statusänderung der Checkbox durch Klicken (nicht checked -> checked und umgekehrt) ausgeführt wird, ist mit dem hover Event auch "behoben" bzw. für die Fehlersuche ausgeschlossen.

Selbst wenn ich "checked" ohne "" in das input-Element schreibe: Alle Checkboxen sind sichtbar angehakt, werden von js aber nicht als angehakt erkannt.

Warum erhalte ich also eine dauerhaft nicht gecheckte Checkbox?

Ergänzung (13. Dezember 2016)

okay, das kann natürlich an this liegen... wie kann ich den Status aber anders abfragen?

 

[fullnewb]

Offenbar ist das this-Objekt nicht das, was es sein sollte. Hier funktioniert der Code.

 

[kling1]

hier ein funktionierendes beispiel ohne jquery
http://codepen.io/anon/pen/pNxOEN

<label>
  <input type="checkbox" id="swagbox">
  <span id="swagspan">unchecked</span>
</label>

<script>
document.querySelector('#swagbox').addEventListener('click', (e) => {
  if (e.target.checked) {
    console.log('checked');
    document.querySelector('#swagspan').textContent = 'checked';
  } else {
    console.log('unchecked');
    document.querySelector('#swagspan').textContent = 'unchecked';
  }
  
});
</script>

 

[Gotcha]

Probier`s mal so...
http://jsfiddle.net/k6u8oL5k/

Und mit mehreren Checkboxen:
http://jsfiddle.net/0rbngq1o/

 

[CitroenDsVier]

Vielen Dank erst einmal für die Antworten! Ich gehe auch davon aus, dass "this" nicht die checkbox war (auch wenn der Debugger von Firefox das so gesagt hat...).

Die checkboxen entstehen in einer Tabelle, aus einer Datenbank ausgelesen. Der Primary Key und die zu übergebende Zahl sei hierbei die erste Spalte "id". Da also viele Checkboxen untereinander sind, kann ich die Checkbox nicht mit einer #id oder .Klasse ansprechen, sondern muss über jQuery oder eben das this (einfachste Lösung, funktioniert nur anscheinend nicht) auf die checkbox kommen.

Nachtrag: Ups, mit Gotcha's Vorschlag sollte das eigentlich funktionieren. Werde es heute Abend ausprobieren.

Ergänzung (14. Dezember 2016)

Nein:

TypeError: $(...).on is not a function

 

[Gotcha]

Nachtrag: Ups, mit Gotcha's Vorschlag sollte das eigentlich funktionieren. Werde es heute Abend ausprobieren.

Ergänzung (14. Dezember 2016)

Nein:

TypeError: $(...).on is not a function

Welche jQuery-Version wird benutzt?
Falls schon älter, kann jQuery damit nichts anfangen.
Dann tausche mal die "on"-Zeile damit aus:

$('.checkbox').change(function(e) {

Es funktioniert auf jeden Fall.

Wenn die Einträge eh schon eine ID besitzen, könntest du dein HTML serverseitig entsprechend gestalten.
Also etwa so...

$output .= '<input type="checkbox" class="checkbox" id="myCheckbox_' . $id . '" />';
// oder ganz ohne CSS-ID
$output .= '<input type="checkbox" class="checkbox" data-id="' . $id . '" />';

Und auslesen kann man das dann mit jQuery wie schon in meinem zweiten Beispiel gezeigt...

var ID = $(this).attr('id');
// bzw.
var ID = $(this).attr('data-id');

$(this) ist übrigens ein jQuery-Objekt, das sich auf ein DOM-Element bezieht.
$() stellt dabei eine jQuery Konstruktionsfunktion dar und this die Referenz zu einem DOM-Element.
Und die Funktion aus deinem Versuch weiss nichts damit anzufangen, weil $(this) gar nicht definiert ist.

 

[CitroenDsVier]

Wenn der Firefox-Debugger mir doch sagt, dass "this" das checkbox-Element ist und mir den checked-Status korrekt anzeigt, wird es daran ja nicht liegen.

Die js function triggere ich jetzt per jQuery, trotzdem kann ich mit js nicht den korrekten Status der Checkbox erfragen.

Mit deinem Codebeispiel @Gotcha hat der gesamte js-Rest nicht funktioniert, daher habe ich das schnell wieder rausgenommen und abstand gehalten.

Ergänzung (14. Dezember 2016)

richtig, mit Attributen und js, also dem .attrib(), habe ich schonmal gearbeitet.

Ich möchte aber den Status der Checkbox, welcher ja leider kein Attribut ist (oder doch?) erfrgaen.

 

[fullnewb]

Hier noch eine Alternative, die ganz ohne JQuery auskommt.

 

[CitroenDsVier]

jQuery ist in der Tat uralt (1.4.x), da ich das tablesorter-Plugin verwende und dieses mit jQuery 1.4.x kommt. Verwende ich stattdessen 3.1.x, funktioniert tablesorter nicht mehr

Ergänzung (14. Dezember 2016)

@evolute: whow, deine Version läuft! danke! Gibt es jetzt noch eine Möglichkeit, auf die id der Checkbox zuzugreifen?

that.attrib('id') funktioniert leider nicht.

edit: hat sich erledigt:

that.id funktioniert.


Kann mir zufällig Jemand von Euch eine weitere kleine Frage beantworten? Ich möchte per js ein php-script auf dem Server starten, um einen Datensatz in die Datenbank zu schreiben oder daraus zu entfernen (ajax). Welches Element muss ich hier vor dem .load angeben?

element.load('script.php');

 

[fullnewb]

Versuch es mal mit

that.id

 

[Gotcha]

1.4... OMG...
Probier`s mal mit der 2.1.1-Version.
Es sollte auf jeden funken.
Das ist eine Standard-Funktion. Tausendmal schon gehabt...
Aber du hast ja jetzt eine andere Lösung gefunden.

Kann mir zufällig Jemand von Euch eine weitere kleine Frage beantworten? Ich möchte per js ein php-script auf dem Server starten, um einen Datensatz in die Datenbank zu schreiben oder daraus zu entfernen (ajax). Welches Element muss ich hier vor dem .load angeben?

Nimm ajax()...

$.ajax({
  url: "test.php",
  cache: false
})
.done(function( rueckgabewert ) {
    console.log( rueckgabewert  );
});

 

[CitroenDsVier]

sieht nach jQuery aus...

ich kriege den Fehler:

TypeError: $.ajax(...).done is not a function

und das ist mein js:

if(checkbox.checked) {
	// rem from showdb
	console.log("Song ID " + checkbox.getAttribute('songID') + " wird geadded");
	
	$.ajax({
		url: "do.php?addToShow&id=" + checkbox.getAttribute('songID'),
		cache: false
	})
	.done(function( rueckgabewert ) {
		console.log( rueckgabewert  );
	});
} else {
	// add to showdb
	console.log("Song ID " + checkbox.getAttribute('songID') + " wird entfernt");
	
	$.ajax({
		url: "do.php?remFromShow&id=" + checkbox.getAttribute('songID'),
		cache: false
	})
	.done(function( rueckgabewert ) {
		console.log( rueckgabewert  );
	});
}

 

[Gotcha]

Ja, vergiss es...
Habe gerade gesehen, das es ajax() erst ab Version 1.5 gibt.
Vielleicht solltest du echt mal über eine Versionsänderung nachdenken. 1.4 ist echt alt.
Das tablesorter-Plugin ist ja auch schon etwas älter.
Vielleicht auch hier mal etwas anderes suchen, wenn es nicht mit der aktuellen jQuery-Version kompatibel ist.
Wobei da nichts gegenteiliges auf der Website steht. -> (1.2.1 or higher)

Davon ab werden in ajax() Variabeln anders weitergereicht.

Ansonsten bleibt dir dann nur pures Javascript. Eigentlich nicht so spassig...

 

[CitroenDsVier]

ich weiß nicht, vielleicht inerpretiere ich die Fehlermeldungen beim Verwenden von anderen jQuery-Versionen auch falsch.

bei 3.1.1 erhalte ich:

jQuery.Deferred exception: $(...).tablesorter is not a function @http://localhost/SongMix/index.php?datenbank:20:5
g/</j@http://localhost/SongMix/style/jQuery-v3.1.1.js:2:29946
g/</k<@http://localhost/SongMix/style/jQuery-v3.1.1.js:2:30262
 undefined  jQuery-v3.1.1.js:2:31515
TypeError: $(...).tablesorter is not a function

und bei 1.5

TypeError: $(...).tablesorter is not a function

 

[Gotcha]

Nimm doch bitte einmal eine 2er Version. https://code.jquery.com/jquery/
Die 3er ist relativ neu und hat einige Änderungen, mit denen ich mich noch nicht so gut auskenne.
Ansonsten kann ich eh wenig zu den Fehlercodes sagen, weil ich nicht weiss, wie dein Code ausschaut.

Sind ausser jQuery noch andere Bibliotheken eingebunden?
Alle Scripte im header? jQuery zuerst?

Befindet sich dein eigentlicher Code innerhalb von... ?

$(document).ready(function() {
////////////////////////////////////////////////////////////////////////////////////////////////////
// your code here...
////////////////////////////////////////////////////////////////////////////////////////////////////
});

 

[CitroenDsVier]

mein header sieht so aus:

<link href="style/style.css" rel="stylesheet" type="text/css" />
		<!-- fonts -->
		<link href="https://fonts.googleapis.com/css?family=Patrick+Hand+SC" rel="stylesheet">
		
		<script src="https://code.jquery.com/jquery-2.2.2.js" integrity="sha256-4/zUCqiq0kqxhZIyp4G0Gk+AOtCJsY1TA00k5ClsZYE=" crossorigin="anonymous"></script>
		<script type="text/javascript" src="style/tablesorter/jquery-latest.js"></script> 
		<script type="text/javascript" src="style/tablesorter/jquery.tablesorter.js"></script>
		
		<link href="style/tablesorter/themes/blue/style.css" rel="stylesheet" type="text/css" />

und dann der ganze js-code.

hiermit erhalte ich auch die Fehlermeldungen von gerade mit den anderen jQueryversionen nicht. Dennoch ist $.ajax(...).done keine function