.checked Identifizierung nicht, wenn ein Optionsfeld

Question

geprüft ich auf einer Seite einige Radio-Buttons, und ich muß nur erkennen, welche in meinem JS, basierend auf ID abgefragt. Ich bin mir nicht sicher, warum das nicht funktioniert. Jedes Mal bekomme ich die Meldung "Nichts überprüft" in meiner Konsole. Vielen Dank!

HTML:

<input type="radio" id="aud1">elephant</input> 
<input type="radio" id="aud2">prairie dog</input> 
<input type="radio" id="aud3">tiger</input> 

JS:

var aud; 
if (document.getElementById('aud1').checked) { 
    var aud = document.getElementById('file1'); 
}else if(document.getElementById('aud2').checked) { 
var aud = document.getElementById('file2'); 
}else if (document.getElementById('aud3').checked){ 
var aud = document.getElementById('file3'); 
} 
else console.log('nothing checked'); 

Answer 1

Siehe unten. Ich habe eine Schaltfläche, um den Code hinzugefügt, die Sie anklicken können, nachdem Sie einige überprüft haben.

Wenn die Seite anfangs geladen wird, wird nichts angeklickt. Ihre JS läuft, sobald die Seite dort gebaut wird, weshalb man die nichts sah geklickt.

document.getElementById('check-radios').onclick = function() { 
 
    var aud; 
 
    if (document.getElementById('aud1').checked) { 
 
    var aud = document.getElementById('file1'); 
 
    console.log('aud1 checked'); 
 
    } 
 
    else if (document.getElementById('aud2').checked) { 
 
    var aud = document.getElementById('file2'); 
 
    console.log('aud2 checked'); 
 
    } 
 
    else if (document.getElementById('aud3').checked) { 
 
    var aud = document.getElementById('file3'); 
 
    console.log('aud3 checked'); 
 
    } 
 
    else console.log('nothing checked'); 
 
}

<input type="radio" id="aud1">elephant</input> 
 
<input type="radio" id="aud2">prairie dog</input> 
 
<input type="radio" id="aud3">tiger</input> 
 

 
<button id="check-radios">Check for clicked</button>

Answer 2

brauchen Sie ausdrücklich diesen Code? warum nicht eine einzige Klasse verwenden, und haben die Dateinamen/ab als benutzerdefiniertes Attribut wie folgt:

<input type="radio" name="animals" class="order" data-animal="elephant" />elephant 
    <input type="radio" name="animals" class="order" data-animal="zebra" />zebra 
    <input type="radio" name="animals" class="order" data-animal="lion" />lion 


<script> 
    $(".order").click(function() { 
    var choice = this.getAttribute("data-animal"); 

    alert(choice); 
    /* console.log(choice); */ 
}) 
</script> 

Auf diese Weise müssen nicht manuell halten mehr Code hinzugefügt hat, kann u fügen Sie einfach den HTML an der Spitze der Verwendung gleiche Klasse und ein anderer Attributwert ... viel leichter zu pflegen -

auch da Sie eine elseif hatten ich einen Namen zu gruppieren sie als einzelne Radios hinzugefügt, wie ich nehme an, Sie gedacht?

<input type="radio" name="animals" class="order" checked data-animal="zebra">zebra 

bedenken gibt es keinen Schluss-Tag für die Eingabe-Tags - nur /> am Ende statt>