Events „checked“ und „unchecked“ für Checkbox-Gruppen und Radio-Buttons

Mootools ist ein feine Sache für Webentwickler und nimmt viel Arbeit ab, wenn es darum geht Funktionalität einer Website zu erweitern. Das JavaScript Framework liefert von Haus aus viel mit, lässt sich aber einfach erweitern.

Mootools ermöglicht es eigene Events anzulegen. Hier eine Möglichkeit um Checkbox-Gruppen und Radio-Buttons mit “checked” und “unchecked” Events nachzurüsten:

JAVASCRIPT:

Element.Events.unchecked = {
 onAdd : function(event) {
 var el = this;
 if (!el.get("checked")) { el.fireEvent("unchecked"); }
 $$("input[name='" + this.get("name") + "']").addEvent("click", function(event){
 if (el.type == "radio" && el != this) { el.fireEvent("unchecked"); }
 if (el.type == "checkbox" && el.get("checked") == false ) { el.fireEvent("unchecked"); }
 });
 }
};

Element.Events.checked = {
 onAdd : function(event) {
 var el = this;
 if (el.get("checked")) { el.fireEvent("checked"); }
 $$("input[name='" + this.get("name") + "']").addEvent("click", function(event){
 if (el.type == "radio" && el == this) { el.fireEvent("checked"); }
 if (el.type == "checkbox" && el.get("checked") ) { el.fireEvent("checked"); }
 });
 }
};

HTML:

<input type="checkbox" name="pizza" value="Schinken"> Schinken<br>
<input type="checkbox" name="pizza" value="Salami"> Salami<br>
<input type="checkbox" name="pizza" value="Spezial" id="pizzaspezial"> Spezial

JAVASCRIPT:

$("pizzaspezial").addEvent('checked', function(){  
    alert('Mach was, wenn die Checkbox ausgewählt wurde!');  
});