Status der Labels für die dazugehörigen Radio buttons ändern

messmar · 11. November 2013

Guten Abend!

Ich versuche den Status bzw. Klasse einiger Labels die, direkt nach dem dazugehörigen Radio Button
eingebettet sind, zu ändern:

Code:

...
$(this).find(':radio, :checkbox').next().click(function(){
         var $el = $(this).prev();
         if($el.attr('type') === 'radio'){
         $el.attr('checked', 'checked'); 
         var name = $el.attr('name');
         $('input[name="' + name + '"]').next().removeClass('Radio_Active')
                 .end()
                 .filter(':checked')
                 .next()
                 .addClass('Radio_Active'); 
        }
});
...

HTML Code:

HTML:

<input type="radio" name="gender" value="Female" class="Radio_Female"><label class="Radio_Inactive"></label>
<input type="radio" name="gender" value="Male" class="Radio_Male"><label class="Radio_Inactive"></label>

Es funktioniert nur bei den ersten zwei Klicks - so zusagen - und danach nicht mehr bzw. danach wird weder der Status der
Radio Buttons (true/false) noch die Klasse der Labels geändert !

Ich vermute mal, dass es an die Methode

Code:

end()

legt.

Es funktioniert zwar wenn ich das Ganze über CSS steuern lasse (aber der Code ist dann anders in jQuery):

Code:

.Radio_Female, .Radio_Male{display:none;}
/*
.Radio_Female + label, .Radio_Female:checked + label, 
.Radio_Male + label, .Radio_Male:checked + label{height:18px; width:18px; padding:0; margin:0; cursor:pointer;}

.Radio_Female + label{background:url('bg_radio.png') no-repeat;}
.Radio_Female:checked + label{background:url('bg_radio_Checked.png') no-repeat;}

.Radio_Male + label{background:url('bg_radio.png') no-repeat;}
.Radio_Male:checked + label{background:url('bg_radio_Checked.png') no-repeat;}

nur es ist dann nicht mehr CrossBrowser (IE8) und deswegen die Überlegung es direkt über den Code zu steuern.

Hat Jemand von euch bitte ne Idee oder Tipp?

Vielen Dank & Gruß
Messmar

BoR · 12. November 2013

Es ist ziemlich schwierig zu verstehen, wo das Problem liegt; zumindest für mich. Kannst du die gewollte Funktionsweise vllt. nochmal etwas genauer erklären – für mich und evtl. auch für andere?

Gruß Lars

messmar · 12. November 2013

Morgen,

ja sicher...

Ich möchte nur das Hintergrund-Image (das über CSS eingebettet ist) für die zwei folgenden Labels:

HTML:

<label class="Radio_Inactive"></label> //für Mann
<label class="Radio_Inactive"></label> //für Frau

ändern und zwar je nach Status des Radio Buttons (checked/unchecked).

Die (richtigen) Radio Buttons in sich sind eigentlich via CSS versteckt:

HTML:

display:none;

also nicht sichtbar und stattdessen sieht der User die zwei labels, die so ein Hintergrund-Image haben, als wären sie die richtigen Radio Buttons.

Der EventHändler:

Code:

click(function(){....})

wird den Labels zugewiesen und unmittelbar danach wird der Status der verstecken Radio Buttons abgefragt, wonach man dann die Klasse der Labels steuert bzw. austauscht.

Die CSS fü rdie Labels könnten so aussiehen:

HTML:

.Radio_Inactive{background:url('bg_radio.png') no-repeat;}
.Radio_Active{background:url('bg_radio_Checked.png') no-repeat;}

Ich habe inzwischen eine andere Lösung gebastelt, aber nichtsdestotrotzt, würde ich gerne eine
eher mehr flexibler und dynamischer Variante verweden (ohne Browser-Abfrage IE8 z.B.).

Code:

Code:

 var IeCheckEl = function(el, cl){
            if(!el.prev().is(":checked")){
                if(el.attr('class') === cl){
                    $('.Radio_Female').next().removeClass().addClass(cl);
                }
                if(el.attr('class') === cl){
                    $('.Radio_Male').next().removeClass().addClass(cl);
                }
                el.prev().prop('checked', true);
                getCl = el.attr('class');
                el.addClass(getCl + '_Checked');
            }
            return el, cl;
};

var ua = $.browser;
$(this).find(':radio, :checkbox').next().click(function(){
                if($(this).prev().attr('type') === 'radio'){
                    var $radio = $(this);
                    if((ua.msie && parseInt(ua.version, 10) === 8) || (ua.msie && parseInt(ua.version, 10) === 7)){
                        return IeCheckEl($radio, 'Radio_Inactive');
                    }else{
                        $radio.prev().prop('checked', true);
                    }
                }
});

CSS extra für IE8

HTML:

label.Radio_Inactive{background-image:url('../img/form/bg_radio.png'); background-repeat:no-repeat; height:18px; width:18px;}
    label.Radio_Inactive_Checked{background-image:url('../img/form/bg_radio_Checked.png'); background-repeat:no-repeat; height:18px; width:18px;}

und für alle anderen Browser geht's über:

Code:

.Radio_Female + label{background:url('bg_radio.png') no-repeat;}
.Radio_Female:checked + label{background:url('bg_radio_Checked.png') no-repeat;}
....

Ich hoffe, es ist jetzt nicht zu viel geworden, von dem was ich alles gepostet habe.

Danke und Gruß
Messmar

BoR · 12. November 2013

Ich hab mal kurz versucht was zu basteln. Der Status usw. wird geändert. Was im Moment Probleme macht, ist die visuelle Seite. Hintergrund der Labels wird geändert und der Status der Radio-Felder auch. Allerdings wird das Aktivieren nach dem ersten Deaktivieren nicht erneut im entsprechenden Radio-Feld angezeigt. Dennoch werden die Werte weiter richtig behandelt. Komm erst heutabend dazu nochmal genau drüber zu schauen, aber da deine Radio-Felder eh unsichtbar sind, sollte es erstmal nicht so gravierend sein.

HTML:

<!DOCTYPE html>

<html>
  <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Radioboxen</title>
    <style>
      html, body
      {
	 width: 100%;
	 height: 100%;
	 background-color: #FFF;
	 text-align: left;
	 color: #000;
	 font-size: 16px;
	 font-family: Arial, Helvetica, sans-serif;
	 font-style: normal
    }
	
      /*input { display:none }*/
			
      label
      {
	 padding: 0;
	 cursor: pointer;
	 vertical-align: middle
      }
			
      .Radio_Inactive { background: url(radioInactiv.jpg) }
      .Radio_Active { background: url(radioActiv.jpg) }
    </style>
  </head>

  <body>
    <form>
      <input type="radio" name="genderF" value="Female">
      <label for="genderF" class="Radio_Inactive">&nbsp;&nbsp;&nbsp;&nbsp;</label><br>
      <input type="radio" name="genderM" value="Male">
      <label for="genderM" class="Radio_Inactive">&nbsp;&nbsp;&nbsp;&nbsp;</label>
      </form>
        
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <script type="text/javascript">
        $(document).ready(function()
	{
	  $("label").click(function()
	  {
	    $(this).toggleClass("Radio_Active");
	    var abgleich = $(this).attr("for");
                  kurz = $("input[name="+abgleich+"]");
	    if(kurz.attr("checked") == "checked")
	    {
	      kurz.attr("checked", false);
	    }
	    else
	    {
	      kurz.attr("checked", true);
	    }
          });
	});
    </script>
  </body>
</html>

Vielleicht ist das ja Anregung für eine andere Idee.

Gruß Lars

hela · 12. November 2013

messmar hat gesagt.:
... nur es ist dann nicht mehr CrossBrowser (IE8) und deswegen die Überlegung es direkt über den Code zu steuern...

Hallo,
der "following-sibling"-Selektor in CSS funktioniert in diesem Zusammenhang auch im IE7. Deshalb würde es vermutlich reichen, wenn du dem INPUT-Element in Abhängigkeit vom "checked"-Zustand per Javascript ein entsprechendes Klassenattribut zuweist und die CSS-Regel entsprechend erweiterst. Beispielsweise so:

CSS:

input.Radio_Female:checked + label,
input.Radio_Female.irgendWas + label
{
  background: url('bg_radio_Checked.png') no-repeat;
}

messmar · 15. November 2013

Guten morgen!

danke euch für die Tipps und Hilfe!

Gruß
Messmar

Status der Labels für die dazugehörigen Radio buttons ändern

messmar

Erfahrenes Mitglied

BoR

Mitglied

messmar

Erfahrenes Mitglied

BoR

Mitglied

hela

messmar

Erfahrenes Mitglied

Neue Beiträge