Kobarin's Development Blog

C#やASP.NET、公開APIなどについての記録です。

javascriptで、radioとselectからgetElementsByNameで選択値を取得する方法

普通のJavaScriptのコードです。
jQuery等を使えば早いですが、別JSファイルを参照するほどでもない簡単なコーディング用にメモします。

HTML
<input type="radio" id="rad1" name="rFruits" value="001" />Apple<br />
<input type="radio" id="rad2" name="rFruits" value="002" checked="checked" />Grape<br />
<input type="radio" id="rad3" name="rFruits" value="003" />Orange<br />

<select id="sel1" name="sFruits">
  <option value="Apple">001</option>
  <option value="Grape" selected="selected">002</option>
  <option value="Orange">003</option>
</select>
JS
<script language="JavaScript">
var _val = "";

//radioの取得
var myFruits = document.getElementsByName("rFruits");
for (i = 0; i < myFruits.length; i++) {
  if (myFruits[i].checked) {
    _val = myFruits[i].value;
  }
}

//selectの取得
var myFruit = document.getElementsByName("sFruits")[0];
_val = myFruit.options[myFruit.selectedIndex].value;
</script>
解説

まずgetElementsByNameの性質から考えてみます。

getElementsByNameは「Elements」という複数形である事からも分かるように、オブジェクトを配列として取得します。nameが同じオブジェクトを全て配列としてゴッソリ取得するわけです。
radioの場合は複数である事が基本なので便利ですが、selectの場合は少し面倒です。

しかしgetElementsByNameの性質そのものに違いはないため、単品のselectを配列として抜き出します。結果、上記のように[0]指定で参照できるようになります。

getElementByIdを使えば、決め打ちなので、こんな面倒な事はせずに済みます。
selectはById、radioはByName…と使い分けると良いかもしれません。

var myFruit = document.getElementById("sFruits");