Optionsfeld "Aktiviert" -Attribut funktioniert nicht

74

Das Optionsfeld checkedwird standardmäßig nicht angezeigt. Ich habe ohne Standardauswahl angefangen und eine sehr einfache js-Validierung durchgeführt, und es hat nicht funktioniert. Also habe ich mich dafür entschieden, nur Standardwerte zu verwenden, bis ich das herausgefunden und festgestellt habe, dass etwas Seltsames vor sich geht.

Das Markup ist gültig und ich habe es in FF, Safari und Chrome versucht. Nichts funktioniert.

Ich denke, es ist ein Konflikt mit der jQueryBibliothek, weil das Problem verschwindet, wenn ich das Aufrufskript entferne.

<label>Do you want to accept American Express?</label> Yes
<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress' value='1' /> No
<input style="width: 20px;" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked" />

Erweitern Sie das Snippet

html forms radio-button

— Jordanien
quelle

2

Was genau ist dein Problem hier? Ich habe Ihren HTML-Code in eine leere Datei kopiert und die Schaltfläche "Nein" ist aktiviert. Dies ist IE8, FF und Opera.

— Christian Nesmark

siehe die Antwort (Art der

— Problemumgehung

89

Wenn Sie mehrere mit demselben Namen und dem aktivierten Attribut haben, wird das zuletzt überprüfte Radio auf der Seite verwendet.

<form>
    <label>Do you want to accept American Express?</label>
    Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  />  
    maybe<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  checked="checked" />  
    No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" />
</form>

Erweitern Sie das Snippet

— jeeves
quelle

6

Es wird tatsächlich das letzte Radio innerhalb der überprüfen <form>. Sie können mehrere geprüfte Eingaben mit demselben Namen haben, sofern sie zu verschiedenen Formularen gehören.

— Bruno Lange

Dies war das Problem in meinem Fall. Die Seite hatte zwei Divs, von denen jeweils nur einer angezeigt wurde. Beide hatten eine gleichnamige Optionsfeldgruppe. In meinem Fall hatten beide das aktivierte Attribut, aber der Browser schien das aus dem versteckten Div (das letztere im HTML-Code) als dasjenige auszuwählen, das zum Anzeigen des ausgewählten Optionsfelds verwendet werden sollte.

— Phil DD

1

@ BrunoLange Das war mein Problem. Ich habe mehrere Instanzen desselben HTML-Codes auf der Seite gerendert - die aus zwei Optionsfeldern bestand, die nicht in einem Formular-Tag enthalten waren, wobei ein Optionsfeld die checkedEigenschaft hatte. Ich musste sie <form>für jede Instanz in ein Tag einschließen, damit das Standard-Optionsfeld aktiviert wurde.

— MegaMatt

Ich musste die Optionsfelder und ihre eindeutig benannten Gruppen in ihre eigenen Formular-Tags einschließen.

— kbo4sho88

1

Dies löste mein Problem, Elemente hatten den gleichen Namen, während sie iteriert und dynamisch erstellt werden !!!

— Shantaram Tupe

34

Das könnte es sein:

Gibt es einen Fehler mit Optionsfeldern in jQuery 1.9.1?

Kurz gesagt: Verwenden Sie nicht attr (), sondern prop (), um Optionsfelder zu überprüfen. Gott, ich hasse JS ...

— Martin T.
quelle

5

Dies hat vielleicht die Frage des OP nicht beantwortet, aber es hat meine beantwortet

— Tommy Nicholas

11

:-( Sie hassen JS

— Daan

habe gestern das gleiche Problem herausgefunden.

— CharlesC

27

Funkeingänge müssen sich in einem Formular befinden, damit "geprüft" funktioniert.

— Michael Seltenreich
quelle

5

Das Einfügen der Eingabe vom Typ radioin ein form(es war divvorher) löst mein Problem! Ich bin gespannt, was der Grund dafür ist.

— Liutong Chen

Hier gilt das gleiche. Ich weiß wirklich nicht, warum ein Formular-Tag benötigt wird, damit die Prüfung zuverlässig funktioniert ... oo

— jlang

Ich denke nicht, dass dies notwendig ist, aber die Verwendung eines Formularelements ermöglicht es, die Benennung zu begrenzen, damit das überprüfte Attribut funktioniert.

— Charis Theo

@CharisTheo, es ist in der Tat notwendig. Versuchen Sie es selbst.

— Michael Seltenreich

@ MichaelSeltenreich Ich habe es tatsächlich getan und ich habe dieses Problem behoben, indem ich den Namen der Optionsfelder geändert habe, ohne sie in ein Formularelement aufzunehmen

— Charis Theo

11

Die ultimative JavaScript-Problemumgehung für dieses nervige Problem -

Schließen Sie einfach den Befehl jQuery in a ein setTimeout. Das Intervall kann extrem klein sein, ich benutze 10Millisekunden und es scheint großartig zu funktionieren. Die Verzögerung ist so gering, dass sie für den Endbenutzer praktisch nicht erkennbar ist.

setTimeout(function(){
  $("#radio-element").attr('checked','checked');
},10);

Dies wird auch mit funktionieren

$("#radio-element").trigger('click');
$("#radio-element").attr('checked',true);
$("#radio-element").attr('checked',ANYTHING_THAT_IS_NOT_FALSE);

Hacky ... hacky ... hacky ... hacky ... Ja, ich weiß ... daher ist dies eine Problemumgehung ...

— Lix
quelle

Es scheint, dass Sie in Ihrem ersten Beispiel das Attribut 'Checked' für alle # Radio-Elemente setzen.

— Etoxin

Da es sich um einen ID-Selektor handelt, sollte es nur 1 passendes Element geben

— Demonkoryu

5

Hey, ich hatte auch ein ähnliches Problem auf einer von Ajax generierten Seite. Ich nahm die generierte Quelle mit dem Webdeveloper-Pluggin in FF und überprüfte alle Eingaben im Formular und stellte fest, dass sich in einem versteckten Div ein weiteres Kontrollkästchen befand (Anzeige: keine). mit der gleichen ID, Nachdem ich die ID des zweiten Kontrollkästchens geändert hatte, fing es an zu funktionieren. Sie können das auch versuchen. Und lassen Sie mich das Ergebnis wissen. Prost

— Codemator
quelle

3

Kopieren Sie einfach Ihren Code in: http://jsfiddle.net/fY4F9/

Nein ist standardmäßig aktiviert. Haben Sie Javascript ausgeführt, das sich auf die Optionsbox auswirken würde?

— Ben Rowe
quelle

Ich weiß, es ist verrückt, oder? Nein, ich habe keine Skripte, die Optionsfelder adressieren. Nur eine Validierung von Textfeldern und ein Schiebereglerskript. Ich gehe es jetzt durch, nur um sicherzugehen ..

— Jordan

Ich habe den Täter gefunden, aber ich weiß nicht genau, was in diesem Skript das Problem verursacht

— Jordanien

Danke Ben, aber es ist definitiv das Drehbuch. Wenn deaktiviert, werden die Schaltflächen standardmäßig aktiviert.

— Jordanien

Eigentlich denke ich, dass es ein Konflikt mit der JQuery-Bibliothek ist

— Jordanien

2

Die jQuery-Dokumentation enthält eine detaillierte Erklärung für checkedEigenschaft und Attribut .

Dementsprechend gibt es hier eine andere Möglichkeit, den ausgewählten Optionsfeldwert abzurufen

var accepted = $('input[name="Contact0_AmericanExpress"]:checked').val();

— Sudhir
quelle

1

Hallo, ich denke, wenn Sie das ID-Attribut für die zweite Eingabe eingeben und ihm einen eindeutigen ID-Wert geben, funktioniert es

<label>Do you want to accept American Express?</label>
Yes<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress'   value='1'/>  
No<input style="width: 20px;" id="amex0" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked"/>

— mentes
quelle

1

Ich könnte dies wiederholen, indem ich den Namen des inputTags für zwei Gruppen von Eingaben wie unten gleich einstelle :

<body>
  <div>
      <div>
        <h3>Header1</h3>
      </div>
      <div>
          <input type="radio" name="gender" id="male_1" value="male"> Male<br>
          <input type="radio" name="gender" id="female_1" value="female" checked="checked"> Female<br>
          <input type="submit" value="Submit">
      </div>
  </div>


  <div>
      <div>
        <h3>Header2</h3>
      </div>
      <div>
          <input type="radio" name="gender" id="male_2" value="male"> Male<br>
          <input type="radio" name="gender" id="female_2" value="female" checked="checked"> Female<br>
          <input type="submit" value="Submit">
      </div>
  </div>
</body>

(Um dies zu sehen, klicken Sie hier )

Die folgenden zwei Lösungen beheben das Problem:

Verwenden Sie unterschiedliche Namen für die Eingaben in der zweiten Gruppe
Verwenden Sie formTag anstelle von divTag für eine der Gruppen (kann nicht wirklich herausfinden, warum dies das Problem lösen würde. Würde gerne einige Meinungen dazu hören!)

— Liutong Chen
quelle

1

**Radio button aria-checked: true or false one at a time**

$('input:radio[name=anynameofinput]').change(function() {
            if (this.value === 'value1') {
                $("#id1").attr("aria-checked","true");
                $("#id2").attr("aria-checked","false");
            }
            else if (this.value === 'value2') {;
                $("#id2").attr("aria-checked","true");
                $("#id1").attr("aria-checked","false");
            }
   });

Erweitern Sie das Snippet

— user11097803
quelle

1

versuchen Sie es auch so

$('input:radio[name="name"][id="abcd'+no+'"]').attr("checked", "checked");

Wenn es ein <form />Tag gibt, dann ("checked", true)anders("checked", "checked")

— Suman Guha Neogi
quelle

0

Ihr Code ist richtig. Versuchen Sie, Ihr JQuery-Skript zu debuggen, um das Problem zu finden! Wenn Sie FF verwenden, können Sie eine Erweiterung zum Debuggen von JS (und JQuery) installieren, die FireBug heißt.

— thePanz
quelle

-1

Fügen Sie einfach jedes geprüfte Attribut zu jedem Funkgerät hinzu, dessen Standardprüfung aktiviert werden soll

Versuche dies :

<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked/>

— Parhamparsa
quelle

-2

Sie verwenden nicht standardmäßigen XML-Code (Werte sollten in doppelte Anführungszeichen und nicht in einfache Anführungszeichen gesetzt werden).

Versuche dies:

<form>
  <label>Do you want to accept American Express?</label>
  Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  />  
  No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" />
</form>

— Clément
quelle

Das liegt an Jordans Doc-Typ. Unabhängig davon funktioniert es immer noch in einem xhtml-Doctype. es wird jedoch nicht validiert.

— Ben Rowe

Ich habe es nur zum Spaß geändert, aber ich weiß, dass das nicht das Problem ist. Die Validierung ist nett, aber sie wird dieses Problem nicht lösen.

— Jordanien

5

@CFP Tatsächlich sind doppelte oder einfache Anführungszeichen in standardkonformem XHTML (Übergang, streng, HTML5 usw.) zulässig. Siehe: dev.w3.org/html5/html-author/#double-quote-attr

— matthewpavkov

-2

Ersetzen checked="checked"durch checked={true}. Oder Sie könnten es sogar auf nur kürzen checked.

Dies liegt daran, dass der erwartete Werttyp der checkedRequisite ein Boolescher Wert ist. keine Zeichenfolge.

— mohammad inanloo
quelle