javascriptでradioボタンのラベルを取得したい（値は取得できています）

Question

前提・実現したいこと

javascriptでradioボタンのラベルを取得したいです。
valueは取得できているのですが、ラベルの取得方法がわからず困っています。

該当のソースコード（valueの取得までできているものです）

function (){
  var rs = "";
  var elements = document.getElementsByName( "sex" ) ;
  for ( var rs="", i=elements.length; i--; ) {
	if ( elements[i].checked ) {
		var rs = elements[i].value;
		break ;
	}
  }
  return rs;
}

質問にございました、<label>が欲しいのかinnertextが欲しいのかが表記されておらず、大変申し訳ございませんでした。
取得したいのはlabelの中身のテキストになります。
以下にhtmlのソースを追記いたします。
お手数おかけしますが、よろしくお願いいたします。

<dd class="radio display-sex" style="display: block;">
    <input type="radio" name="sex" value="0" id="not_specified"><label for="not_specified">指定しない</label>
    <input type="radio" name="sex" value="1" id="boy"><label for="boy">男の子</label>
    <input type="radio" name="sex" value="2" id="girl" checked="checked"><label for="girl">女の子</label>
</dd>

どんな追記をしたらラベルが取得できるようになるのか、皆様のお力をお貸しいただけると幸いです。
よろしくお願いいたします。

Comments

[coco_bauer]

「radioボタンのラベルを取得したい」とのことですが、対象として考えているHTMLの例を質問に追加してもらえませんか？　「ラベルを取得」と「LABELタグ」は関係ありますか？

[m.ts10806]

javascriptのコードもこれだけではエラーになります。なるべく現状を再現したものにしてください。

[se_ariga]

javascriptのコードなのですが、グーグルタグマネージャーのカスタムjavascriptの記述欄にて記述しているのでまんま現状のものとなります。エラーの出ないように改変いただけると助かります。。

Answer 1

ラベルというのがlabel要素だとすれば、for属性か先祖を探せばいいので。

function getLabel(element) {
  var label = null;
  var id = element.id;
  if (id !== '') {
    label = document.querySelector('label[for="' + id + '"]');
  }

  if (!label) {
    label = element.closest('label');
  }

  return label ? label.textContent : '';
}

aria-labelなどは知りません。

Comments

[yambejp]

closestはいいですね

[x_x]

念のため、closest()のPolyfillを挙げておきます。
https://developer.mozilla.org/ja/docs/Web/API/Element/closest

Answer 2

IEとEdgeはサポートしていませんが、HTMLInputElementにはlabelsプロパティがあり、関連付けられた<label>をこのプロパティで取得することが可能です。

not_specified.labels[0].textContent = 'hoge';
boy.labels[0].textContent = 'fuga';
girl.labels[0].textContent = 'piyo';

Comments

[miyabi_pudding]

これは超便利ですね

Answer 3

labelの使い方は2通りあるのでたとえばこんな感じ

document.addEventListener('change',function(e){
  var t=e.target;
  if(t.nodeName=="INPUT" && t.type=="radio"){
    if(
      t.id && (l=document.querySelector('[for='+t.id+']')) ||
      ((l=t.parentNode).nodeName=="LABEL")
      ){
      console.log(l.textContent);
    }
  }
});

<input type="radio" name="x" id="r1" value="1"><label for="r1">hoge1</label>
<input type="radio" name="x" id="r2" value="2"><label for="r2">hoge2</label>
<input type="radio" name="x" id="r3" value="3"><label for="r3">hoge3</label>
<hr>
<label><input type="radio" name="y" value="1">fuga1</label>
<label><input type="radio" name="y" value="2">fuga2</label>
<label><input type="radio" name="y" value="3">fuga3</label>

Answer 4

<input type="radio" name="sex" value="0" id="not_specified"><label for="not_specified">指定しない</label>

inputタグの後ろに対象となるlabelタグが必ず記述されている、というルールであれば、以下の書き方でも拾えますね。

elements[i].nextSibling.innerText

Comments

[se_ariga]

私自身あまりjavascriptの知識がないので、解答いただいたものを理解するのに時間のかからないtkturbo様の解答をベストアンサーとさせていただきました。
無事ラベルを表示することができましたことをここに報告いたします、ありがとうございました。

Answer 5

call使ったやり方もありますね。
ただ、もしかしたらIE動かないかも・・・。

var elements = document.getElementsByName( "sex" );
var labels = {};
var str = "";

var labelTag = document.getElementsByTagName("label");

for (var i = 0; i < labelTag.length; i++) {
  labels[labelTag.item(i).htmlFor] = labelTag.item(i).innerHTML;
}

var getValueStr = function(){
  str = labels[this.id];
  console.log(str);
};

elements.forEach(function(val, index){
  val.onchange = getValueStr;

  if (val.checked) {
    getValueStr.call(val);
  }
});

Answer 6

radioとselectを勘違いしていたのでこの回答は無視してください。

<select>
  <option value="aaaaa">あああああ</option>
</select>

これの「あああああ」が欲しいということですよね？

var label = elements[i].innerText;

これが「あああああ」にあたる部分かと思います。

Answer 7

該当のHTMLコードも、追記してください。
radioボタンと、label要素の構造関係によって、取得するためのスクリプトも変わってきます。