2016-06-29 7 views
1

Bitte überprüfen Sie die folgende Ausgabe auf Konsole, beachten Sie, dass das erste Eingabeattribut und ausgewählt geprüft:jQuery: checked nicht mit anfänglicher Arbeits (HTML-Attribut) Radioeingang

enter image description here

Sie ich kann sehen, 2 Radio input s, 1 ist checked, aber weder Selektor noch prop noch is funktioniert dafür. Der Code funktioniert korrekt, wenn ich manuell auf eines der Radio klicke. Hier ist mein HTML:

<div class="col-sm-6"> 
    Type: 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-default active"> 
      <input type="radio" name="generator-type" id="opt-type-passphrase" value="0" autocomplete="off" checked> 
      Passphrase 
     </label> 
     <label class="btn btn-default"> 
      <input type="radio" name="generator-type" id="opt-type-password" value="1" autocomplete="off"> 
      Password 
     </label> 
    </div> 
</div> 

Warum ist der Code nicht funktioniert, wenn die Seite geladen wird, wenn ich kein Radio geklickt haben? Gibt es eine Möglichkeit, es zu beheben?

EDIT: Findet das Problem, habe ich diesen Code auf der Seite zu laden:

 $("input[name='generator-type'][value=" + this.Options.Type + "]").prop("checked", ""); 

Die richtige Lösung wird unter Verwendung von:

.prop("checked", true) 

Aber kann jemand bitte erklären, wie es funktioniert? Warum gibt es das checked Attribut, aber prop Funktion ist immer noch falsch?

+0

@HectorBarbossa Danke, ich habe die Quelle des Problems gefunden, aber immer noch nicht verstehen, wie 'prop' und' is' noch arbeiten. Kannst du es erklären? –

+1

Ihre Frage zur Funktionsweise wird in [der Dokumentation] (http://api.jquery.com/prop/) behandelt. Ein wichtiger Aspekt, den es zu verstehen gilt: Das HTML-Attribut legt nur den Wert * initial * der Eigenschaft fest. Wenn es über Code oder Benutzerinteraktion geändert wird, ändert sich das HTML nicht, aber die Eigenschaft tut es. –

Antwort

1

Sie müssen wie dieses

$(...).is(':checked') 

Warum überprüfen? Weil die Methode jquery is einen CSS-Selektor akzeptiert, mit dem die aktuell übereinstimmenden Elemente gefiltert werden.

So wird temp.is('checked') nur wahr, wenn die temp Elemente das checked Tag haben. In Ihrem Fall haben sie das input Tag, also stimmen Sie nicht überein.

Die Verwendung von :checked stimmt mit dem CSS-Pseudo-Selektor überein, ob das aktuelle Element markiert ist oder nicht. Das ist, was du willst.

Wenn Sie dies wissen, können Sie auch $(...).is('[checked]') verwenden, was den Wert true zurückgibt, wenn die übereinstimmenden Elemente das Attribut checked haben. Das ist wahrscheinlich das, was Sie ursprünglich versuchen wollten. Allerdings ist der herkömmliche Weg, :checked zu verwenden.

+0

Guter Fang. Aktualisiert. – asemahle

3

Versuchen Sie .is(':checked') anstelle von .is('checked'). Bitte überprüfen Sie diese Fiddle.

1

Sie einen Doppelpunkt in der is-geprüft Code fehlt:

temp.is(":checked") 

statt

temp.is("checked") 
+0

Wie unterscheidet sich das von der bestehenden Antwort? –

Verwandte Themen