【JavaScript】name 属性で要素を取得する方法｜getElementsByName・querySelector・フォーム値取得・ラジオボタンまで解説

<form id="surveyForm">
  <p>好きな色は？</p>
  <label><input type="radio" name="color" value="red"> 赤</label>
  <label><input type="radio" name="color" value="blue"> 青</label>
  <label><input type="radio" name="color" value="green"> 緑</label>

  <p>好きな食べ物は？（複数選択可）</p>
  <label><input type="checkbox" name="food" value="sushi"> 寿司</label>
  <label><input type="checkbox" name="food" value="ramen"> ラーメン</label>
  <label><input type="checkbox" name="food" value="curry"> カレー</label>

  <button type="submit">送信</button>
</form>

// name="color" の全要素を取得
const colorInputs = document.getElementsByName("color");
console.log(colorInputs.length); // 3
console.log(colorInputs[0].value); // "red"

// NodeList が返る（ライブコレクション）
colorInputs.forEach(input => {
  console.log(input.value); // "red", "blue", "green"
});

// 最初の name="color" 要素
const first = document.querySelector('[name="color"]');

// name="color" の全要素
const all = document.querySelectorAll('[name="color"]');

// 特定フォーム内の name="color"
const form = document.querySelector("#surveyForm");
const colors = form.querySelectorAll('[name="color"]');

// チェック済みのラジオボタン
const checked = document.querySelector('input[name="color"]:checked');
console.log(checked?.value); // 選択された値（未選択なら undefined）

const form = document.querySelector("#surveyForm");

// name="color" の RadioNodeList を取得
const colors = form.elements["color"];
console.log(colors.value); // 選択されたラジオボタンの value!!

// name="food" の NodeList を取得
const foods = form.elements["food"];
console.log(foods.length); // 3

// 全フォーム要素をループ
for (const el of form.elements) {
  console.log(el.name, el.value, el.type);
}

// 方法(1): form.elements（最もシンプル）
const form = document.querySelector("#surveyForm");
const selectedColor = form.elements["color"].value;
console.log(selectedColor); // "blue"（選択されている値）

// 方法(2): querySelector + :checked
const checked = document.querySelector('input[name="color"]:checked');
console.log(checked?.value); // "blue" or undefined

// 方法(3): getElementsByName + ループ
const radios = document.getElementsByName("color");
let value = null;
radios.forEach(radio => {
  if (radio.checked) value = radio.value;
});
console.log(value); // "blue"

// 方法(1): querySelectorAll + :checked（推奨）
const checkedFoods = [...document.querySelectorAll('input[name="food"]:checked')]
  .map(cb => cb.value);
console.log(checkedFoods); // ["sushi", "curry"]

// 方法(2): getElementsByName + filter
const foods = document.getElementsByName("food");
const selected = [...foods].filter(cb => cb.checked).map(cb => cb.value);
console.log(selected); // ["sushi", "curry"]

// 方法(3): FormData（後述）
const formData = new FormData(document.querySelector("#surveyForm"));
const foodValues = formData.getAll("food");
console.log(foodValues); // ["sushi", "curry"]

const form = document.querySelector("#surveyForm");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const formData = new FormData(form);

  // 個別の値を取得
  console.log(formData.get("color"));   // "blue"（ラジオの選択値）
  console.log(formData.getAll("food")); // ["sushi", "curry"]（チェックボックス）

  // 全キーと値をループ
  for (const [key, value] of formData) {
    console.log(`${key}: ${value}`);
  }

  // オブジェクトに変換
  const data = Object.fromEntries(formData);
  console.log(data); // { color: "blue", food: "curry" }
  // ※ 同名キーは最後の値だけになる。チェックボックスは getAll() を使う

  // JSON として API に送信
  fetch("/api/survey", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  });
});

document.querySelectorAll('input[name="plan"]').forEach(radio => {
  radio.addEventListener("change", (e) => {
    console.log("選択されたプラン:", e.target.value);
    updatePrice(e.target.value);
  });
});

const MAX = 3;
document.querySelectorAll('input[name="tags"]').forEach(cb => {
  cb.addEventListener("change", () => {
    const checked = document.querySelectorAll('input[name="tags"]:checked');
    if (checked.length > MAX) {
      cb.checked = false;
      alert(`最大 ${MAX} 個まで選択できます`);
    }
  });
});

// <select name="prefecture">...</select>
const select = document.querySelector('select[name="prefecture"]');
console.log(select.value); // 選択されている option の value

// 変更時
select.addEventListener("change", () => {
  console.log("選択:", select.value);
});

// name 属性で動的入力フィールドを追加
function addField(index) {
  const input = document.createElement("input");
  input.type = "text";
  input.name = `item_${index}`;
  input.placeholder = `商品 ${index}`;
  document.querySelector("#dynamic-fields").appendChild(input);
}