按名称选择元素

HTML 元素可以具有可选的 name 属性。 例如，以下单选按钮具有 name 属性，其值为 size

<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 对象。 因此，我们使用 call() 方法借用 Array 对象的 map() 方法。