zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Radiobutton Zustand überwachen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.04.2008, 17:10
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.05.2007
Beiträge: 77
Sonny Lane befindet sich auf einem aufstrebenden Ast
Standard Radiobutton Zustand überwachen

Hallo zusammen

Ich würde gerne mit JS herausfinden, welcher Radiobutton gerade aktiv ist, damit ich dem entsprechenden Elternelement <p> eine zusätzliche Klasse zuweisen kann.

Folgenden Code der Radiobuttons habe ich:
Code:
<p class="group"><input type="radio" name="gruppe" value="a" /> A</p>
<p class="group"><input type="radio" name="gruppe" value="b" /> B</p>
<p class="group"><input type="radio" name="gruppe" value="c" /> C</p>
Wenn nun also 'C' gewählt wird, soll dem elterlichen <p> zusätzlich die Klasse 'active' gegeben werden.


Folgenden Ansatz habe ich, allerdings wird damit JEDER Button active, den ich klicke. Möchte aber nur jeweils den gewählten.
Code:
		function setStatus() {
			if(document.getElementById('dsl1000').checked == true) {
				document.getElementById('p-dsl1000').className='active';
			}
		}
Und das ganze dann über onclick="setStatus()" aufgerufen.


Ich hoffe ihr könnt mir weiterhelfen. Gerne auch unter Verwendung einer kleinst Library.

Grüsse,
Sonny Lane
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.04.2008, 18:08
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

Mit jQuery würde das wie folgt aussehen. Ich nutze jQuery super gerne, da es bei mir meistens nicht bei einem Script bleibt.

Code:
function setStatus(){
   $("input[name='gruppe']:checked").parent().addClass("active");
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.04.2008, 19:49
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.05.2007
Beiträge: 77
Sonny Lane befindet sich auf einem aufstrebenden Ast
Standard

Hallo hemfrie

Vielen Dank für deine Antwort. Ich habe nun folgendes konstruiert, allerdings werden nun alle einmal ausgewählten Buttons dauerhaft "geclassed" Selbst wenn die der Radiobutton nicht mehr ausgewählt ist, bleibt die Klasse checked bzw. jedenfalls deren Styles.

Hier der Code
Code:
		$('.radiobutton').click(function() {
			if($("input[name='gruppe']:checked")) {
				$(this).parent().addClass("checked");
			} else {
				$(this).parent().removeClass("checked");
			}
		});
Code:
<p class="radio-container"><input name="gruppe" class="radiobutton" type="radio" value="" /> Test></p>
Danke!

Geändert von Sonny Lane (18.04.2008 um 19:52 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 18.04.2008, 20:27
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

Das removeClass wurde bei Dir nur nicht ausgeführt, weil es niemals ein "else" geben wird.

Du kannst es aber recht einfach lösen, indem Du erstmal alle .checked Klassen entfernst und anschließend dem aktuellen input wieder eine .checked Klasse zuordnest.

Habs bei mir mal getestet:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta name="language" content="de-de" />
        <title>untitled</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $("document").ready(function(){
                $('.radiobutton').click(function(){
                    $(".radio-container").removeClass("checked") //entfernt alle checked Klassen
                    $(this).parent().addClass("checked"); //die aktuelle Auswahl erhält eine checked Klasse
                });
            });
        </script>
    </head>
    <body>
        <p class="radio-container">
            <input name="gruppe" class="radiobutton" type="radio" value="" />Test1
        </p>
        <p class="radio-container">
            <input name="gruppe" class="radiobutton" type="radio" value="" />Test2
        </p>
    </body>
</html>
Mit Zitat antworten
  #5 (permalink)  
Alt 18.04.2008, 20:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.05.2007
Beiträge: 77
Sonny Lane befindet sich auf einem aufstrebenden Ast
Standard

Aber klar logisch! Saubere Lösung, vielen Dank hemfrie
Mit Zitat antworten
  #6 (permalink)  
Alt 18.04.2008, 21:19
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

Zitat:
Zitat von Sonny Lane Beitrag anzeigen
Aber klar logisch! Saubere Lösung, vielen Dank hemfrie
Kein Problem

Bis auf das entfernen der Klasse funktionierte Dein Skript ja schon.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Eingabefeld bei Radiobutton aktivierung einblenden crossgolfer85 Javascript & Ajax 1 17.10.2009 05:19
Wie 3 Radiobutton direkt neben Bild? uooao388d99 CSS 2 19.05.2009 19:38
Klick auf Bild soll Radiobutton aktivieren & Formular absenden fmp Javascript & Ajax 2 26.09.2008 16:57
Box soll erscheinen bei aktiviertem Radiobutton FonFan CSS 6 27.08.2008 13:15
Radiobutton -> Textarea Suvi (X)HTML 2 25.08.2008 17:01


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:20 Uhr.