チェックボックスで選択されたものだけ

by ginpei

HTML

<form id="the-form">
  <label><input type="checkbox" name="favorite" value="apple" checked> Apple</label>
  <label><input type="checkbox" name="favorite" value="banana"> Banana</label>
  <label><input type="checkbox" name="favorite" value="orange" checked> Orange</label>
  <button id="the-button">Check</button>
  <div id="output"></div>
</form>

JavaScript

const elButton = document.querySelector('#the-button');
elButton.addEventListener('click', (event) => {
  event.preventDefault();

  const elFavorites = document.querySelectorAll('#the-form [name="favorite"]');
  const favorites = [...elFavorites]
    .filter(el => el.checked)
    .map(el => el.value);
  
  document.querySelector('#output').textContent = `[${favorites}]`;
});