ラジオボタンのテキストを取得する方法（値ではない）

ラジオボタンの「値」属性を取得できることがわかっていますが、ラジオボタンのテキストを取得するのが妙に難しいと思っています。ラジオボタンのテキストを取得する方法（値ではない）

次の例を考えてみましょう。 3つのラジオボタンがあり、最初のラジオボタンの値を "赤"に警告し、ラジオボタンのテキスト "リンゴ"を警告しようとしますが、失敗します。

ほとんどすべての要素のテキストを取得するには、elem.childNodes [0] .nodeValueを使用します。なぜそれはラジオボタンのために働かないのですか？

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

出典

2009-08-20 dl__

ような<input>内のテキストのようなものが存在しないので、それは動作しません - それは、XHTMLでは違法です。それでなければなりません：

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

次にあなたが<label>内のテキストを探すことができます。

出典

2009-08-20 20:11:22

1 - 私は誰かが今日 ''要素にテキストを入れて見てきた2回目、面白い –

1 - 私は私もそれが可能だった知らなかった認めます。 ;）初めて私はこのようなものを見た。それにもかかわらず、値は、とにかく（私の答えを参照してください）取得することができます。 –

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

置き換えは、何らかの理由でそこにある改行を取り除くことです（別のOSで異なる、私はWindowsを実行しています）。

出典

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. 
});

出典

2013-10-11 05:29:08

これまで、質問に対する完全な解決策がなかったため、この回答が追加されました。各無線ノード用として

filter確認無線ノードを取得するための

をclickイベントリスナーを追加する

forEach：コードの下
は、Arrayオブジェクトから2つのプロトタイプの機能を使用していますRadioNodeListには、これらの機能が組み込まれていません。

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>

出典

2017-07-24 18:08:43 MaxZoom

ラジオボタンのテキストを取得する方法（値ではない）

答えて

関連する問題