Checkboxen überwachen

[Mario Steinko]

Hi!

Ich möchte 3-10 Checkboxen (mittels PHP erstellt, Anzahl kann varieren) auf Veränderungen überwachen.

Ich habe ein Formular, da bei Änderungen automatisch eine js function startet, in der möchte ich nun überprüfen ob eines der Checkboxfelder geänder wurde, wie kann ich das denn am besten machen?
(Prototype JS und Scriptaculous sind vorhanden)

Vielen Dank
Mario

[Der Martin]

Hallo,

Ich möchte 3-10 Checkboxen (mittels PHP erstellt, Anzahl kann varieren) auf Veränderungen überwachen.

sollte ja kein Problem sein, Eventhandler machen's möglich.

Ich habe ein Formular, da bei Änderungen automatisch eine js function startet, in der möchte ich nun überprüfen ob eines der Checkboxfelder geänder wurde, wie kann ich das denn am besten machen?

Checkboxen haben (im Gegensatz zu Radiobuttons) die interessante Eigenschaft, ihren Zustand bei jedem Anklicken zu ändern. Wenn du die erwähnte Funktion also mit dem onclick-Handler aufrufst[1], kannst du innerhalb der Funktion sicher sein, dass irgendwas verändert wurde.

So long,
 Martin

[1] Das Schöne ist, dass der onclick-Handler sogar feuert, wenn der Zustand der Checkbox sich durch Tastaturbedienung ändert.

[Mario Steinko]

thx, war ja simpler als gedacht, danke ;)

lg
Mario

[molily]

Beispiel-HTML:

<ul id="checkboxen">  
<li><input type="checkbox"></li>  
<li><input type="checkbox"></li>  
<li><input type="checkbox"></li>  
<li><input type="checkbox"></li>  
<li><input type="checkbox"></li>  
<li><input type="checkbox"></li>  
...  
</ul>

Erste Möglichkeit:
Bei jedem input-Element in der Liste einen eigenen click-Handler registrieren.

document.observe("dom:loaded", function() {  
	function checkboxKlick (event) {  
		alert(this.checked);  
	}  
	$$("#checkboxen input[type=checkbox]").each(function (el) {  
		el.observe('click', checkboxKlick);  
	});  
});

Zweite Möglichkeit:
Event-Delegation, d.h. bei einem Vorfahrenelement alle Klicks seiner Nachfahrenelemente verarbeiten und in der Handler-Funktion prüfen, ob ein input-Element geklickt wurde:

document.observe("dom:loaded", function() {  
	$("checkboxen").observe('click', function (event) {  
		var target = event.element();  
		if (!target.match("input[type=checkbox]")) return;  
		alert(target.checked);  
	});  
});

Das würde ich empfehlen. (Es gibt mittlerweile auch Prototype-Erweiterungen für Event-Delegation.)

Mathias