チェックボックス - Javascript

チェックされているチェックボックスの値の取得

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="script.js"></script>
  <title>Document</title>
</head>
<body>
  <form action="">
    <ul>
      <li><label for="apple"><input type="checkbox" name="fruits" id="apple" value="apple">apple</label></li>
      <li><label for="orange"><input type="checkbox" name="fruits" id="orange" value="orange">orange</label></li>
      <li><label for="banana"><input type="checkbox" name="fruits" id="banana" value="banana">banana</label></li>
      <li><label for="cherry"><input type="checkbox" name="fruits" id="cherry" value="cherry">cherry</label></li>
    </ul>
    <p><button type="button" id="btn">button</button></p>
  </form>
</body>
</html>

script.js

window.onload = function(){
  const btn = document.getElementById('btn');
  const ele = document.getElementsByName('fruits');

  btn.addEventListener('click', function(){
    let arr = [];
    for(let i of ele){
      if(i.checked){
        arr.push(i.value);
      }
    }
    console.log(arr);
  });
}

チェックボックスのチェックを外す

script.js

window.onload = function(){
  const btn = document.getElementById('btn');
  const ele = document.getElementsByName('fruits');

  btn.addEventListener('click', function(){
    for(let i of ele){
      i.checked = false;
    }
  });
}