Input Attribute: type=button checked; oder Buttons als gedrückt.

[Dave]

Hallo,

mir ist im selfHTML auf einer Seite aufgefallen, dass checked auch auf Buttons angewendet werden kann. Damit wollte ich nun "display: none" bzw. "display: block" verbinden, und so optionale Formularfelder anzeigen lassen bzw. verstecken. Dazu sollte der Button je nachdem eben gedrückt erscheinen oder nicht, das verstecken bzw. anzeigen übernehmen.
Wenn ich aber jetzt den Button definiere, z. B. so:
<input type="button" value="Druecker" onclick="if(!this.checked) this.checked=true; else this.checked=false;" checked>
Dann läuft es nicht so, wie bei Radio-Buttons bzw. Checkboxen. Der boolean-Wert von checked des Buttons lässt sich nicht, wie ich es probiert habe, mit JavaScript ändern, so dass auch die Anzeigeform des Buttons sich ändert.
Es steht tatsächlich in selfHTML zu checked, dass man es auch auf Buttons anwenden kann. Das funktioniert aber nur in der Form:
<input type="button" value="Gedrueckter" checked>
Mache ich etwas falsch? Bleibt mir wohl nur die Möglichkeit dem Button noch einen eingedrückten Zwilling zu machen, der auf den onClick-Event mit den Formularfelder eben mal mit seinem Bruder die Rolle tauscht.

Gruss,
Dave

[Ver2felt]

In welchem Browser führst du das denn aus? Bei mir im Opera sehen beide Buttons gleich aus und insbesondere auch nicht unterschiedlich zu einem Button ohne checked-Attribut.

Aber probier mal, das Attribut als checked="checked" zu definieren. Ich meine mich zu erinnern, dass Javascript mit diesen "Null"-Attributen (also Attributen ohne Wertzuweisung dahinter) nicht klarkommt.

Gruß

[Dave]

Hi, also ich versuch's nochmal in einfacheren Worten. Kurz gesagt, ich möchte einen Button, der ohne die Seite neuzuladen einerseits als "gedrückt" erscheint, nachdem man ihn angeklickt hat, andererseits als nicht-"gedrückt" erscheint, wenn man ihn wiederholt anklickt.
Ich benutze den Firefox und alle Lösungen, die einfacher wären, als zwei Buttons, die sich abwechseln, der eine als "gedrückt" markiert mit checked, der andere normal, dürfen gerne auch ausschließlich im Firefox funktionieren.
Der Internet Explorer in der Version 7 bei mir macht keinen Unterschied zwischen ge"checked" und nicht, stellt immer einen "Taster"-Button dar, keinen quasi Schalter, so wie ich es ja gern sehen möchte.
Dein Tipp kommt mir sehr bekannt vor, funktioniert aber auch nicht besser nach meinen ersten Versuchen. Am Anfang dachte ich noch, es gäbe da ein Attribut, welches mir eventuell helfen könnte, einen Button entweder als Taster oder Schalter zu definieren. Dann wurde mir aber bewusst, ich müsste wahrscheinlich den onClick-Event miteinbeziehen, den ich in der Folge sowieso brauche.

[Ver2felt]

Hi Dave,

im Firefox konnte ich es jetzt nachvollziehen. Es scheint so zu sein, dass Firefox die HTML-Spezifikation großzügig auslegt und den Button gedrückt erscheinen lässt, wenn das Attribut vorhanden ist. Seine Javascript-Engine dagegen scheint sich tatsächlich nur auf type="checkbox" und type="radio" zu beschränken.

Daran lässt sich wohl nix ändern.

Gruß

[MudGuard]

Hi,

im Firefox konnte ich es jetzt nachvollziehen. Es scheint so zu sein, dass Firefox die HTML-Spezifikation großzügig auslegt und den Button gedrückt erscheinen lässt, wenn das Attribut vorhanden ist.

Das wäre nicht großzügig, sondern falsch. "must ignore" ist ziemlich eindeutig.

cu,
Andreas

[Dave]

Ich habe das jetzt mal im Firefox Forum als Problem gefasst, zusammen mit deinem Zitat. Mal sehen, ob ich dort noch zusätzliche Aussagen oder sogar eine Problemlösung, bzw. Begründung erhalte. Vorher habe ich es noch im Firefox 4 Beta ausprobiert, wo es nicht anders war. Gedrückt wird gezeigt, aber Zugriff über JavaScript Fehlanzeige.

[Gunnar Bittersmann]

@@Dave:

nuqneH

ich möchte einen Button, der ohne die Seite neuzuladen einerseits als "gedrückt" erscheint, nachdem man ihn angeklickt hat, andererseits als nicht-"gedrückt" erscheint, wenn man ihn wiederholt anklickt.

Du möchtest also eine _Checkbox_, die nicht zu sehen ist, und deren _Label_ abhängig von ihrem Status wie ein gedrückter bzw. nicht gedrückter Button aussieht.

Das sollte sich mit ein paar Zeilen CSS erreichen lassen. Nur der IE braucht wohl etwas Nachhilfe per JavaScript.

Qapla'

[dave]

Hi,

Das sollte sich mit ein paar Zeilen CSS erreichen lassen. Nur der IE braucht wohl etwas Nachhilfe per JavaScript.

Wie ich es schaffe dass etwas nach Button aussieht habe ich erst vor kurzem gelernt, wie das mit CSS geht ist mir allerdings ein Rätsel.

Genauso ist es mir ein Rätsel wie ich es schaffe dass der Button gedrückt aussieht?

~dave

[ChrisB]

Hi,

Du möchtest also eine _Checkbox_, die nicht zu sehen ist, und deren _Label_ abhängig von ihrem Status wie ein gedrückter bzw. nicht gedrückter Button aussieht.

Das sollte sich mit ein paar Zeilen CSS erreichen lassen.

Zeig!

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Zeig!

The Real ChrisB sollte mal seinen Namen schützen lassen, sonst kann ja jeder Audi unter seinem Namen posten. ;-)

Qapla'

[ChrisB]

Hi,

Zeig!

The Real ChrisB sollte mal seinen Namen schützen lassen, sonst kann ja jeder Audi unter seinem Namen posten. ;-)

Keine Ahnung, worauf du jetzt hinauswillst - aber das hier war und ist „the real” ... und geschützt hat er seinen Nick natürlich auch, sofern dieses Feature nicht gerade mal wieder ausgefallen ist, was es ja offenbar periodisch immer wieder mal gerne macht.

Die Aufforderung war ernst gemeint, weil ich nicht sehe, wie du das rein mit CSS umsetzen willst.
Der Attribut-Selektor für das checked-Attribut der Checkbox kann hier m.W. keine Hilfe sein, weil der sich nur auf den im HTML festgelegten Attributwert bezieht, nicht aber auf den durch User-Interaktion dynamisch zustande gekommenen aktuellen Zustand - oder liege ich da falsch?

Und wie du sonst das Label abhängig vom Checkbox-Zustand formatieren willst, darauf bin ich ja jetzt gespannt und deshalb eben die Aufforderung: „Zeig mal!“

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Keine Ahnung, worauf du jetzt hinauswillst

Auf ';-)'. Na gut, war nicht lustig.

Der Attribut-Selektor für das checked-Attribut der Checkbox kann hier m.W. keine Hilfe sein, weil der sich nur auf den im HTML festgelegten Attributwert bezieht, nicht aber auf den durch User-Interaktion dynamisch zustande gekommenen aktuellen Zustand - oder liege ich da falsch?

Nein, da liegst du richtig.

Und wie du sonst das Label abhängig vom Checkbox-Zustand formatieren willst, darauf bin ich ja jetzt gespannt

Magic!

und deshalb eben die Aufforderung: „Zeig mal!“

<input id="myOnOffButton" type="checkbox"/>  
<label for="myOnOffButton">myOnOffButton</label>

#myOnOffButton  
{  
	position: absolute;  
	left: -666px;  
}  
  
#myOnOffButton+label  
{  
	background: #DDD;  
	border: 3px outset;  
	padding: 2px 5px;  
}  
  
#myOnOffButton:checked+label  
{  
	background: #CCC;  
	border-style: inset;  
}

Du hattest dich aus diesem Thread zu früh ausgeklinkt?

Qapla'

[ChrisB]

Hi,

Und wie du sonst das Label abhängig vom Checkbox-Zustand formatieren willst, darauf bin ich ja jetzt gespannt

Magic!

Das war mir bisher entgangen, danke.

Ist denn der durch CSS-Expressions zu begeisternde der einzige Browser, der das noch nicht umsetzt?

Du hattest dich aus diesem Thread zu früh ausgeklinkt?

Sieht so aus, ja.

MfG ChrisB

[Dave]

Dann wäre also auch eine Lösung rein mit CSS und ohne JavaScript denkbar, die mein Eingangs angegebenes Problem beseitigen würde. Da setze ich mich gegebenfalls nochmal dran, weil ich schon wieder so ziemlich vergessen habe, wie man das mit den Ankern macht. :P

[Dave]

Hallo Gunnar,
das klingt schonmal für-sich interessant. Nur kann ich es mir auch nicht recht vorstellen, wie du das meinst. Also meine Lösung gestaltete sich wie folgt:

  
function buttoncheck(button) {  
 if(document.getElementById(button).style.display=="") {  
  document.getElementById(button).style.display="none";  
  document.getElementById(button+"down").style.display="";  
 } else {  
  document.getElementById(button).style.display="";  
  document.getElementById(button+"down").style.display="none";  
 }  
 if(document.getElementById(button+"_div").style.display=="none") {  
  document.getElementById(button+"_div").style.display="";  
 } else {  
  document.getElementById(button+"_div").style.display="none";  
 }  
}

Die JavaScript-Funktion, wo sie _hingehört_.

  
<input type="button" id="kap" value="Kapitel" onclick="buttoncheck('kap')">  
<input type="button" id="kapdown" value="Kapitel" style="display:none" onclick="buttonswitch('kap')" checked>  
<input type="button" id="kart" value="Karten" onclick="buttoncheck('kart')">  
<input type="button" id="kartdown" value="Karten" style="display:none" onclick="buttonswitch('kart')" checked>

Die Buttons nebeneinander. Die gedrückten Varianten im Hintergrund.

  
<br>  
<div id="kap_div" style="display:none">  
Kapitel:<br>  
 <select name="kapitel">  
  <option>Neues Kapitel</option>  
 </select><br>  
 <input type="text" name="addkapitel">  
</div>  
<div id="kart_div" style="display:none">  
Karten:  
 <li style="list-style-type: none;">Karte 1</li>  
 <li style="list-style-type: none;">Karte 2</li>  
</div>

Die Bereiche, die versteckt oder gezeigt werden sollten, je nachdem ob man auf den Button geklickt hat. Mit CSS geht es vielleicht ein klein-wenig eleganter. Ich gebe zu, dass meine Lösung noch etwas unausgegoren erscheint. Wer sich die Zeit nehmen will noch etwas daran rumzuhantieren, darf mir gerne Vorschläge machen.
Gruss,
Dave

[Dave]

Entschuldigt, ich muss mir selbst antworten. Mir ist gerade beim Testen, was ich besser vorher gemacht hätte, ein Fehler aufgefallen. Die Funktionsaufrufe sollten in allen Buttons natürlich zur selben Funktion führen und es gibt ja nur eine.

[MudGuard]

Hi,

mir ist im selfHTML auf einer Seite aufgefallen, dass checked auch auf Buttons angewendet werden kann.

Wo steht das bitte?
Damit es korrigiert werden kann, sollte da etwas stehen, das andeutet, daß das checked-Attribut auch bei type="button" eine Auswirkung haben ...

Zitat aus HTML 4.01:

checked [CI]
    When the type attribute has the value "radio" or "checkbox", this boolean attribute specifies that the button is on. User agents must ignore this attribute for other control types.

Insbesondere der letzte Satz dürfte Dich interessieren.

cu,
Andreas

[Dave]

Hier, wenn du bei http://de.selfhtml.org/@title=de.selfhtml.org in Suche nach: "checked" eingibst, erscheint diese Seite: http://de.selfhtml.org/javascript/objekte/elements.htm#checked als "bester Treffer". Dort unter "Anwendbar auf: " taucht auch "Klick-Buttons" auf.

[Bademeister]

Hi MudGuard.

Zitat aus HTML 4.01:

checked [CI]
    When the type attribute has the value "radio" or "checkbox", this boolean attribute specifies that the button is on. User agents must ignore this attribute for other control types.

Auch wenn letzter Satz auf den ersten Blick nach einer Randbemerkung aussieht, finde ich das ausgesprochen interessant. Mir war nicht klar, dass es Richtlinien vom W3C für die Interpretation von fehlerhaftem HTML gibt; das geht nämlich in dem diesem Forum eigenen Dogmatismus bzgl. "unvorhersehbarem Browser-Verhalten" bei invalidem Markup unter. Sag ich mal ganz frank, ohne es zynisch zu meinen. Es ist wirklich interessant.

Viele Grüße,
der Bademeister