DOM-Manipulation JavaScript - Der Internet Explorer - Formulare
1. Die Abschnitte
- Einführung
- Namensvergabe
- CSS-Anweisungen
- Formulare
- Event-Handler
2. radio- und checkbox-Elemente
Folgende einfache Ausgangssituation. Wir haben ein einfaches Formular mit zwei radio-Buttons und einem
checkbox-Element. Nun wollen wir alle vorselektierende Felder (checked="checked") zurücksetzen,
also das Attribut entfernen. Bei den folgenden Beispielen konzentriere ich mich nur auf den ersten radio-Button,
im Lösungscode behandele ich dann alle Elemente. Das Prinzip ist aber dasselbe.
<form name="formular">
<input type="radio" name="bla" value="1"
checked="checked" />1<br />
<input type="radio" name="bla" value="2" />2<br />
<input type="checkbox" name="blubber"
value="jau" checked="checked" />jau<br />
<a href="#" onclick="delCheck();">Löschen</a>
</form>
3. Profis wie ich
... wollen das natürlich korrekt über das DOM machen. Also zuerst den bestehenden Attributknoten ansteuern und dann entfernen.
function delCheck()
{
var check = document.formular.bla[0].getAttributeNode('checked');
document.formular.bla[0].removeAttributeNode(check);
}
Firefox ok, Opera und Safari auch. Internet Explorer 6/7 ... was wohl? Nichts. Also die einfache Variante.
function delCheck()
{
document.formular.bla[0].removeAttribute('checked');
}
Und wieder Firefox ok, Opera und Safari auch. Internet Explorer 6/7? Was wohl?
4. Die Lösung aller Probleme
Manchmal möchte man die Erfinder von JavaScript zum Teufel wünschen, weil es immer zig völlig verschiedene Möglichkeiten gibt, um ein Problem zu lösen. Aber manchmal muss man ihnen dafür auch dankbar sein. Besonders wenn mal wieder ein Browser (wer wohl?) nicht mitspielt.
Denn in diesem Fall hilft uns eine Variante weiter, die so alt ist, dass man sich schon fast dafür schämt, sie zu benutzen. Aber Hauptsache, sie funktioniert.
document.formular.elements['bla'][0].checked = false;
Oder noch ein wenig kürzer:
document.formular.bla[0].checked = false;