Wie bekomme ich den Text eines Radiobuttons (nicht der Wert)

Ich weiß, dass ich das Attribut "value" eines Radiobuttons bekommen kann, aber ich finde es seltsam schwierig, den Text des Radiobuttons zu erhalten.Wie bekomme ich den Text eines Radiobuttons (nicht der Wert)

Betrachten Sie das Beispiel unten. Es hat 3 Radiobuttons und versucht, den Wert des ersten Radiobuttons zu alarmieren, der "rot" ist und dann versucht, den Text des Radiobuttons "Apfel" zu alarmieren, aber das schlägt fehl.

Den Text von fast jedem Element kann mit elem.childNodes [0] .nodeValue abgerufen werden. Warum funktioniert es nicht für Radiobuttons?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
<head> 
<title>Radio Buttons</title> 
<style type="text/css"> 
</style> 
<script type="text/javascript"> 
function start(){ 
    var rblist = document.getElementsByName("colors"); 
    var elem = rblist[0]; 
    alert(elem.value); // PRINTS "RED" 
    alert(elem.childNodes[0].nodeValue); //THROWS ERROR 
} 
</script>  
</head> 
<body onload="start();"> 
<input type="radio" name="colors" value="red" checked>apple</input> 
<input type="radio" name="colors" value="blue">sky</input> 
<input type="radio" name="colors" value="green">grass</input> 
</body> 
</html>

Quelle

2009-08-20 dl__

Es funktioniert nicht, weil es nicht so etwas wie Text innerhalb eines <input> wie das ist - dass in XHTML illegal ist. Es muss sein:

<input type="radio" name="colors" value="red" id="radio1" checked="checked" /><label for="radio1">apple</label>

Dann sind Sie für den Text innerhalb des <label> aussehen kann.

Quelle

2009-08-20 20:11:22

+1 - 2. Mal, wenn ich heute jemanden Text in einem '' Element gesetzt gesehen haben, interessant –

+1 - Ich gebe zu, ich wusste nicht einmal, es war möglich. ;) Zum ersten Mal sah ich so etwas. Trotzdem kann der Wert trotzdem abgerufen werden (siehe meine Antwort). –

elem.nextSibling.nodeValue.replace('\n', '')

Der Ersatz ist der Newline loszuwerden (kann auf verschiedenen Betriebssystemen unterschiedlich sein, ich bin mit Windows) Zeichen, die es aus irgendeinem Grund.

Quelle

2009-08-20 20:17:47

<form id="myForm"> 
    <ul> 
     <li><input type="radio" name="colors" value="red">apple</li> 
     <li><input type="radio" name="colors" value="blue">sky</li> 
     <li><input type="radio" name="colors" value="green">grass</li> 
    </ul> 
</form> 

<script> 
(function(){ 
    var form = document.getElementById("myForm"); 

    var colorFields = form.elements["colors"]; 

    alert(colorFields[0].nextSibling.data); //alerts the text apple not the value red. 
});

Quelle

2013-10-11 05:29:08

Ich habe diese Antwort hinzugefügt, weil es vorher keine vollständige Lösung für die Frage gab.
Im Folgenden Code verwendet zwei Prototyp-Funktionen aus dem Array-Objekt:

forEach Klick-Ereignis-Listener für jeden Funkknoten
filter abzurufen geprüft Funkknoten

als das hinzufügen In RadioNodeList sind diese Funktionen nicht integriert.

var rblist = document.getElementsByName("colors");; 
 

 
[].forEach.call(rblist, function(e) { 
 
    e.addEventListener('click', showText, false) 
 
}); 
 

 
function showText() { 
 
    var rb = [].filter.call(rblist, function(e) { 
 
    return e.checked; 
 
    })[0]; 
 
    console.log(rb.nextElementSibling.innerText); 
 
};

<input type="radio" name="colors" value="red" /><label>apple</label> 
 
<input type="radio" name="colors" value="blue" /><label>sky</label> 
 
<input type="radio" name="colors" value="green" /><label>grass</label>

Quelle

2017-07-24 18:08:43 MaxZoom

Wie bekomme ich den Text eines Radiobuttons (nicht der Wert)

Antwort

Verwandte Themen