Radio-Button abwählbar
Kai
- javascript
0 Gunnar Bittersmann0 Kai0 Gunnar Bittersmann0 Kai
0 Kai
Hallo,
in einem Eingabebereich will ich 2 Knöpfe haben, mit dem man sich für eins von beiden oder keinem entscheiden kann.
Nun dachte ich, Radio-Button wären da perfekt. Mit JQuery kann man sie dann auch schön machen.
Problem ist nur, dass wenn man einmal eins gewählt hat, es nicht mehr abwählen kann, so dass nichts angewählt ist.
Deshalb wollte ich das nun selber machen und habe ein "onClick" Event eingebaut. In der Funktion prüfe ich, ob es zuvor schon angewählt war, wenn ja, wird checked = false gesetzt.
So weit so gut von der Idee. Es funktioniert aber nur halb. Als ich testweise vor dem checked = false ein alert eingebaut hatte, ging es wunderbar. Wenn kein alert da war, ging nichts.
Nach mehr Beobachtungen hab ich nun folgende Vermutung:
Er setzt bei einem klick checked auf true und wiederholt das später nochmals, was mein checked überschreibt. Durch das Alert kommt eine kurze Pause hinein, weshalb mein checked = false setzen die letzte Anweisung ist und es nun funktioniert.
Testweise habe ich mal onClick mit onMouseUp getauscht um zu prüfen, ob es damit vielleicht geht. Leider löste mir onMouseUp die Funktion nicht aus.
Habt ihr eine Lösung wie ich es ohne dem Alert machen kann?
Danke
@@Kai:
nuqneH
in einem Eingabebereich will ich 2 Knöpfe haben, mit dem man sich für eins von beiden oder keinem entscheiden kann.
Drei Optionen – drei Knöpfe. So einfach.
Problem ist nur, dass wenn man einmal eins gewählt hat, es nicht mehr abwählen kann, so dass nichts angewählt ist.
http://forum.de.selfhtml.org/archiv/2010/3/t195812/#m1311017
Qapla'
super danke,
mit der Funktion vom Link funktioniert es.
Warum, weiß ich zwar nicht aber es geht.
@@Kai:
nuqneH
super danke,
mit der Funktion vom Link funktioniert es.
?? Nicht dafür.
Was ich dir dagen wollte: Nimm drei Radio-buttons, kein JavaScript-Geraffel.
Von der Problematik, dass laut RFC 1866 immer ein Radiobutton einer Gruppe gewählt ist (ggfs. automatisch der erste), mal ganz abgesehen:
Nutzer wissen nicht, dass man deine Radiobuttons auch abschalten könnte. Sie kennen dieses Verhalten nicht (im Gegensatz zu Checkboxen, aber solche willst du auch nicht verwenden). Willst du den Nutzern erst dein UI erklären?
Warum, weiß ich zwar nicht aber es geht.
Ich schätze, Nutzertests werden dir zeigen, dass es nicht geht.
Qapla'
Da es eine Firmeninterne Test-Seite ist und der Effekt so gewünscht ist, hoffe ich, dass ich es keinem erklären muss :-)
?? Nicht dafür.
Ok, auch wenn du mir was anderes sagen wolltest: Damit bin ich an das gewünschte Ziel gekommen
@@Kai:
nuqneH
Da es eine Firmeninterne Test-Seite ist
Das hättest du gleich im OP erwähnen sollen. Siehe Tips für Fragende in der Charta.
Qapla'
mache ich normal, wenn ich denke dass es relevant ist. Aber hast schon recht, auch wenn ich es eigentlich als allgemeine Frage sehe, ändert das bisschen was.
... aber ich hab nun den ersten Nachteil gefunden.
Im Internet-Explorer 7 funktioniert es genau so, wie ich es will. Wenn man auf ein markiertes Feld klickt, wird es abgewählt.
Firefox geht das schon wieder nicht - wär zwar schön aber kann man vernachlässigen, da dies nicht der Haupt-Browser ist.
Schlimmer allerdings ist, dass es auf dem iPhone auch nicht geht. Darauf sollte es vor allem laufen.
Da das iPhone das Hauptanwendungsgebiet ist, will ich auch keine 3 Knöpfe machen, da jetzt schon fast kein Platz mehr ist.
Hm, vielleicht noch wer ne Idee, wie ich es auf dem iPhone, also Safari, hinbekomme?
@@Kai:
nuqneH
Hm, vielleicht noch wer ne Idee, wie ich es auf dem iPhone, also Safari, hinbekomme?
Mit Checkboxen. Wenn eine aktiviert wird, deaktivierst du per JavaScript die jeweils andere.
Qapla'
hm, da war ich mit Gedanken am Anfang schon. Weiß auch nicht warum ich dann sofort auf radio-Button aufgesprungen bin.
Funktioniert auf jeden Fall gerade wieder nicht. Bin aber glaube ich darauf gekommen warum (wieso es zuvor auch nicht funktioniert hat):
Ich nutze jQuery zur Darstellung.
Wenn ich im Code checked = false mache, setzt er zwar das checked-Feld korregt auf false aber lässt es ausgewählt.
Hm, da muss ich mal bei jQuery nachschauen, ob ich da was finde was das behebt. Ohne jQuery passt es zum Rest der Seite nicht....
hm, an der Zeit kann es doch nicht liegen.
Habe es gerade so versucht:
function onClickRadioButton(clickedIndex)
{
window.setTimeout(function()
{
if(lastLocation == clickedIndex)
{
var radioButton = document.getElementById("location_" + clickedIndex);
radioButton.checked = false;
lastLocation = -1;
}
else
lastLocation = clickedIndex;
},5000);
}
Habe absichtlich einen Timeout von 5 Sekunden genommen. Mit Alerts in den Zeilen habe ich getestet, ob die Funktion wirklich in das if kommt. Das funktioniert wunderbar.
Leider wählt der Button sich so bei einem 2. klick darauf nicht ab. Alert muss irgend was machen, wovon ich nichts weiß