名前による要素の選択

HTML要素はオプションのname属性を持つことができます。例えば、以下のラジオボタンは、値がsizeのname属性を持っています。

<input type="radio" name="size" value="S"> S
<input type="radio" name="size" value="M"> M
<input type="radio" name="size" value="L"> L
<input type="radio" name="size" value="XL"> XL
<input type="radio" name="size" value="XXL"> XXLCode language: HTML, XML (xml)

name属性で要素を選択するには、getElementsByName()メソッドを使用します。

以下の例では、getElementsByName()メソッドを使用してラジオボタンを選択し、値のリストを返します。

let elems = document.getElementsByName('size');
let sizes = [].map.call(elems,elem => elem.value);

console.log(sizes);Code language: JavaScript (javascript)

出力

["S", "M", "L", "XL", "XXL"]Code language: JSON / JSON with Comments (json)

仕組み

• まず、getElementsByName()メソッドを使用して、名前でラジオボタンを選択します。
• 次に、選択したラジオボタンの値を配列に変換します。getElementsByName()が返すオブジェクトはNodeListであり、これは配列のようなオブジェクトであり、Arrayオブジェクトではありません。したがって、map()メソッドをArrayオブジェクトからcall()メソッドを使用して借用します。