Label feuert klicken Sie auf die Funktion zweimal

Irgendeinen Weg, eine Funktion aufzurufen, und gleichzeitig sparen Wirkung auf den radiobutton durch Klick auf label?

Beispiel (muss ich öffnen/schließen, fieldsets mit Checkboxen, indem Sie Beschriftungen für radiobuttons)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<title>Klicken Sie auf Label</title>
 
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
 
$(document).bereit(Funktion(){ 
 
accordionOptions();
 
}); 
Funktion accordionOptions(){
 
$("label.Legende, label.kinderlos").klicken Sie( function(event){
 
var Gegensätze = $(".subtype").nicht($(this).next());
 
var el = $(this);
 
Gegensätze.find("input:checked").attr('checked', false);
 
Gegensätze.removeClass("expanded");
 
el.Geschwister("label").removeClass("expanded");
 
el.next(".subtype").toggleClass("expanded");
 
el.toggleClass("expanded");
 
}); 
 
}
 
</script>
 
<style type="text/css">
 
<!--
 
HTML { text-align: center}
 
BODY { background: #FFF; color: #494949; font: .813em/140% Arial, Helvetica, sans-serif; text-align: left; margin: 4em auto; width: 240px}
 
LABEL { display: block; margin-bottom: .6em}
 
.Untertyp { display: none}
 
.aufgeklappt { display: block !wichtig}
 
.label.erweitert { /*styling ausgewählt fieldset überschrift*/}
 
-->
 
</style>
 
</head> 
<body>
 
<form action="" method="post">
 
<fieldset>
 
<label class="Legende erweitert"><input name="rb_item" type="radio" value="" checked="checked" /> - Element 0100</label>
 
<fieldset class="Untertyp erweitert">
 
<label><input name="artikel01" type="checkbox" value="" /> - Element 0101</label>
 
<label><input name="artikel01" type="checkbox" value="" /> - Element 0102</label>
 
</fieldset>
 
<label class="kinderlos"><input name="rb_item" type="radio" value="" /> - Element 0200</label>
 
<label class="legend"><input name="rb_item" type="radio" value="" /> - Element 0300</label>
 
<fieldset class="Untertyp">
 
<label><input name="item03" type="checkbox" value="" /> - Element 0301</label>
 
<label><input name="item03" type="checkbox" value="" /> - Element 0302</label>
 
</fieldset>
 
<button type="submit">Senden Sie</button>
 
</fieldset>
 
</form>
 
</body>
 
</html>

Verwenden $().change(). Wenn Sie auf ein Label eines radiobutton || checkbox die change-event ausgelöst wird. So dont versuchen zu beheben Ihre click event verwenden Sie einfach den change event

InformationsquelleAutor Vladimir | 2009-08-03

3

Das problem mit e.preventDefault(); ist es hält das label klicken Sie auf überprüfen Sie die radio-Taste.

Eine bessere Lösung wäre einfach ein "geprüft" quick-check so:
```
$("label").click(function(e){
  var rbtn = $(this).find("input");
  if(rbtn.is(':checked')){
    **All the code you want to have happen on click**
  }
)};
```
InformationsquelleAutor yoshyosh

Verwenden Sie den focus-event auf die radio-Taste statt.

Versuchen Sie dies:

<script type="text/javascript">
    $(function(){ 
        accordionOptions();
    });
    var accordionOptions = function(){
        $("label.legend > input, label.childless > input").focus(function(event) {
            var el = $(this).parent();
            var opposites = $(".subtype").not(el.next());
            opposites.find("input:checked").attr("checked", false);
            opposites.removeClass("expanded");
            el.siblings("label").removeClass("expanded");
            el.next(".subtype").toggleClass("expanded");
            el.toggleClass("expanded");
        });
    }
</script>

Danke, Jason. Ich wiederhole reoly für die bisherige Lösung. Es ist cool. Aber in diesem Fall das Attribut toggleClass-label und neben fieldset.Subtyp hat keine Wirkung. Es wird offensichtlich, wenn wir hinzufügen werden neue design-Regel .erweiterte Klasse (zum Beispiel .aufgeklappt { display: block !important; background: #FCC}.

InformationsquelleAutor Jason Berry

0
```
- $("label.legend, label.childless").click( function(event){
+ $("label, input").click( function(event){
```
... und dann einige Kosmetika zu halten radio Etiketten am Ort.
- Vielen Dank, Andrew. Es ist cool, Lösung. Aber in diesem Fall das Attribut toggleClass-label und neben fieldset.Subtyp hat keine Wirkung. Es wird offensichtlich, wenn wir hinzufügen werden neue design-Regel .erweiterte Klasse (zum Beispiel .aufgeklappt { display: block !important; background: #FCC}.
InformationsquelleAutor Andrejs Cainikovs

Diese Werke in mein Ende:

$("label.legend, label.childless").click( function(event){
  var opposites = $(".subtype").not($(this).next());
  var el = $(this);
  opposites.find("input:checked").removeAttr('checked');
  opposites.removeClass("expanded");
  el.siblings("label").removeClass("expanded");
  el.next(".subtype").addClass("expanded");
  el.toggleClass("expanded");
});

Dass der Austausch toggleClass für addClass.

InformationsquelleAutor Eivind

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.