Sandy87: Mit einer Checkbox 2 Buttons (inkl. Verlinkung) einblenden

Hallo Welt =)

Bitte steinigt mich nicht falls ich hier irgendwelche "doofe" Sachen frage aber mein Problem lässt sich weder leicht in Google eingeben noch in einer SuFu eines Forums. Aus diesem Grund habe ich bisher auch kaum brauchbare Tipps für mein Problem gefunden (...und vielleicht auch weil ich mich mit JavaScript zu wenig auskenne XD )

Ist folgendes überhaupt mit JavaScript zu realisieren?
-> Wenn ich eine Checkbox anklicke (Häckchen) sollen 2 Button (die jeweils eine Verlinkung auf eine andere Seite haben) unten drunter aktiviert werden.

Ich bin dabei auf JavaScript gekommen weil es doch eine ähnliche Funktion gibt "onmouseover" oder so mit der man doch graue Buttons ohne Funktion beim "mouseover" aktivieren kann...

Ich hoffe man kann mich überhaupt verstehen XD

Nochmal in Stichpunkten:
Checkbox nicht aktiviert = 2 "graue" Buttons ohne Funktion
Checkbox aktiviert = 2 "bunte" Buttons mit Funktion
"Funktion" = Verlinkung auf andere Seiten

Naja... vielleicht kann mir hier ja jemand helfen. Bisher konnte ich mir mit SELFHTML immer selbst helfen aber hier stosse ich irgendwie an meine Grenzen.

Grüße
eure Sandy87

  1. Mahlzeit Sandy87,

    Ist folgendes überhaupt mit JavaScript zu realisieren?

    Ja.

    -> Wenn ich eine Checkbox anklicke (Häckchen) sollen 2 Button (die jeweils eine Verlinkung auf eine andere Seite haben) unten drunter aktiviert werden.

    Wenn Du eine Checkbox http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick@title=anklickst, sollen zwei Buttons (die Du z.B. anhand ihrer http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=IDs identifizieren könntest) http://de.selfhtml.org/javascript/objekte/elements.htm#disabled@title=aktiviert werden?

    Naja... vielleicht kann mir hier ja jemand helfen. Bisher konnte ich mir mit SELFHTML immer selbst helfen aber hier stosse ich irgendwie an meine Grenzen.

    Man kann sein Grenzen ja auch erweitern ... viel Spaß und Erfolg dabei! :-)

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
    1. Man kann sein Grenzen ja auch erweitern ... viel Spaß und Erfolg dabei! :-)

      Hey! Vielen Dank :-P Dann versuch ich mich mal bei der Erweiterung :-D

    2. Hallo,

      Wenn Du eine Checkbox http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick@title=anklickst, sollen zwei Buttons (die Du z.B. anhand ihrer http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=IDs identifizieren könntest) http://de.selfhtml.org/javascript/objekte/elements.htm#disabled@title=aktiviert werden?

      Denke, es ist so gemeint: Nachdem eine Checkbox http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange@title=geändert wurde, sollen die Buttons entspechend aktiviert oder deaktiviert werden.

      Meines Wissens ist nämlich der http://de.selfhtml.org/javascript/objekte/elements.htm#value@title=value zum Zeitpunkt des Click-Events noch unverändert.

      Gruß, Don P

      1. [latex]Mae  govannen![/latex]

        Wenn Du eine Checkbox http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick@title=anklickst, sollen zwei Buttons (die Du z.B. anhand ihrer http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=IDs identifizieren könntest) http://de.selfhtml.org/javascript/objekte/elements.htm#disabled@title=aktiviert werden?

        Denke, es ist so gemeint: Nachdem eine Checkbox http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange@title=geändert wurde, sollen die Buttons entspechend aktiviert oder deaktiviert werden.

        So mag es gemeint sein, praktisch gibt es mit onchange im IE zu viele Probleme (obwohl IE hier offenbar als einziger(?) Browser die Spezifikationen *korrekt* umsetzt), um dieses Event unbekümmert einsetzen zu können. Ich habe gerade mal in einem Formular, das ein click und ein change-Event auf dem <form> hat, das click-Event entfernt und im IE(8) wurde meine Checkbox-XOR-Funktion daraufhin nicht mehr korrekt ausgeführt.

        Meines Wissens ist nämlich der http://de.selfhtml.org/javascript/objekte/elements.htm#value@title=value zum Zeitpunkt des Click-Events noch unverändert.

        ?? Wo kommt hier value ins Spiel? Bei Änderung der Checkbox (Abfrage auf .checked) wird .disabled der Button true oder false gesetzt

        Stur lächeln und winken, Männer!
        Kai

        --
        Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
        in Richtung "Mess up the Web".(suit)
        SelfHTML-Forum-Stylesheet
        1. Hallo,

          ?? Wo kommt hier value ins Spiel? Bei Änderung der Checkbox (Abfrage auf .checked) wird .disabled der Button true oder false gesetzt

          Ok, dann halt checked. Beim Klick-Event dürfte auch .checked noch unverändert sein. Bin aber nicht 100% sicher, schon länger nicht mehr ausprobiert...

          Gruß, Don P

  2. @@Sandy87:

    nuqneH

    Ist folgendes überhaupt mit JavaScript zu realisieren?

    Es ist modernen Browsern sogar ohne JavaScript zu realisieren!

    2 Button (die jeweils eine Verlinkung auf eine andere Seite haben)

    Für Verlinkungen auf andere Seiten sind Links da, nicht Buttons. (Man kann Links per CSS auch wie Buttons aussehen lassen.)

    Markup:

    <input id="control" type="checkbox"/>  
    <label for="control">zeige Links</label>  
    <ul id="links">  
      <li><a href="foo">foo</a></li>  
      <li><a href="bar">bar</a></li>  
    </ul>
    

    Stylesheet:

    #control:not(:checked)~#links { display: none }  
    #control:checked~#links { display: block }
    

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. Für Verlinkungen auf andere Seiten sind Links da, nicht Buttons. (Man kann Links per CSS auch wie Buttons aussehen lassen.)

      Ja das ist klar :-D Links/Buttons: Mit den Buttons meinte ich ja 2 Grafiken. D.h. wenn die Checkbox nicht aktiviert ist, soll eine graue Grafik erscheinen ohne Verlinkung hinten dran. Beim aktivieren der Checkbox soll die graue Grafik durch eine bunte Grafik (beides halt Buttons) ausgetauscht werden. Dieser bunte Button soll dann auch eine Verlinkung besitzen :-)

      Welcher Ansatz ist denn dann am sinnvollsten??

      Grüße
      Sandy87

      1. @@Sandy87:

        nuqneH

        D.h. wenn die Checkbox nicht aktiviert ist, soll eine graue Grafik erscheinen ohne Verlinkung hinten dran. Beim aktivieren der Checkbox soll die graue Grafik durch eine bunte Grafik (beides halt Buttons) ausgetauscht werden. Dieser bunte Button soll dann auch eine Verlinkung besitzen :-)

        Welcher Ansatz ist denn dann am sinnvollsten??

        Gleiches Markup, aber '#control:not(:checked)~#links' wird nicht komplett ausgeblendet, sondern nur die darin befindlichen Links '#control:not(:checked)~#links a'.

        Die Links haben die bunten Grafiken als Hintergrundbild ('display: block' nicht vergessen). Der Linktitel wird mit einer Image-Replacement-Technik unsichtbar gemacht.

        Die grauen Grafiken sind die Hintergrundbilder von '#links li' und damit sichtbar, wenn die Links unsichtbar sind.

        Alle Hintergrundbilder befinden sich in einer Grafikdatei (CSS-Sprites).

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. Danke :-)

          Die grauen Grafiken sind die Hintergrundbilder von '#links li' und damit sichtbar, wenn die Links unsichtbar sind.

          Alle Hintergrundbilder befinden sich in einer Grafikdatei (CSS-Sprites).

          Versteh ich das dann richtig das der "Linktext" in einer normalen Schriftart zu sehen ist und meine Button nur die Hintergründe sind? Ich wollte eigentlich 2 Grafiken nehmen und eine etwas ausgefallenere Schriftart für die Beschriftung nutzen...

          Muss jetzt sowieso erstmal SuFu's benutzen. Versteh fast nur Bahnhof ^^

      2. Mahlzeit Sandy87,

        Ja das ist klar :-D Links/Buttons: Mit den Buttons meinte ich ja 2 Grafiken.

        OK - Du schreibst also "Buttons" und meinst aber "verlinkte Grafiken"?

        Sorry, aber das ist nicht besonders fair Deinen Lesern gegenüber ...

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
        1. OK - Du schreibst also "Buttons" und meinst aber "verlinkte Grafiken"?

          Sorry, aber das ist nicht besonders fair Deinen Lesern gegenüber ...

          :-((( Tut mir leid :-(((
          Hab ja im Anfangspost geschrieben das ich mich schwer tue mein Problem in Worte zu fassen... mit ein Grund warum ich hier gelandet bin und nicht fündig wurde... Einfacher wäre es wenn ich es aufmalen würde ;-)

    2. @@Gunnar Bittersmann:

      nuqneH

      #control:not(:checked)~#links { display: none }

      #control:checked~#links { display: block }

        
      Wobei die zweite Zeile überflüssig ist.  
        
      Qapla'
      
      -- 
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
      (Mark Twain)