Optionsfeld "Aktiviert" -Attribut funktioniert nicht

Question 1

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

Question 2

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

Question 3

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 ...

Question 4

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

Question 5

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 ...

Question 6

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

Question 7

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?

Question 8

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();

Question 9

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"/>

Question 10

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!)

Question 11

**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

Question 12

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")

Question 13

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.

Question 14

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/>

Question 15

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>

Question 16

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.

Answer 1

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

Answer 2

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

Answer 3

siehe die Antwort (Art der

Problemumgehung

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

kbo4sho88

Answer 9

1

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

Shantaram Tupe

Answer 10

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

Answer 11

5

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

Tommy Nicholas

Answer 12

11

:-( Sie hassen JS

Daan

Answer 13

habe gestern das gleiche Problem herausgefunden.

CharlesC

Answer 14

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

Answer 15

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

Answer 16

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

jlang

Answer 17

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

Answer 18

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

Michael Seltenreich

Answer 19

@ 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

Answer 20

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 ...

Answer 21

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

Etoxin

Answer 22

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

Demonkoryu

Answer 23

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

Answer 24

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

Answer 25

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

Answer 26

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

Jordanien

Answer 27

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

Jordanien

Answer 28

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

Jordanien

Answer 29

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();

Answer 30

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"/>

Answer 31

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!)

Answer 32

**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

Answer 33

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")

Answer 34

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.

Answer 35

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/>

Answer 36

-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

Answer 37

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

Ben Rowe

Answer 38

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

Answer 39

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

Answer 40

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.

Optionsfeld "Aktiviert" -Attribut funktioniert nicht

Antworten: