【JavaScript】チェックボックスのチェックを付ける方法と外す方法

<input type="checkbox" id="sample1" name="sample" value="サンプルテキスト1">
<label for="sample1">サンプルテキスト1</label> <!-- 最初は非選択の状態 -->


<input type="checkbox" id="sample2" name="sample" value="サンプルテキスト2" checked>
<label for="sample2">サンプルテキスト2</label> <!-- 最初からチェック状態 -->

sample.checked = true;

<div>
  <p>好きなフルーツを選択してください</p>
	<input type="checkbox" id="apple" name="fruits" value="りんご">
    <label for="apple">りんご</label>
	<input type="checkbox" id="strawberry" name="fruits" value="いちご">
    <label for="strawberry">いちご</label>
  	<input type="checkbox" id="grape" name="fruits" value="ぶどう">
    <label for="grape">ぶどう</label>
  <button id="check-btn">全てのフルーツにチェックを入れる</button>
</div>

<script>
window.addEventListener('DOMContentLoaded',function(){
  const fruits = document.getElementsByName('fruits'); // ①
  const checkBtn = document.getElementById('check-btn'); // ②
  checkBtn.addEventListener('click', allCheck,false); // ③
  
  function allCheck(){
    for(let i = 0; i < fruits.length; i++){ // ④
      fruits[i].checked = true; // ⑤
    }
  }
});
</script>

sample.checked = false;

<div>
  <p>現在使っているOSを選択してください</p>
		<input type="checkbox" id="windows" name="os" value="Windows" checked>
    <label for="windows">Windows</label>
		<input type="checkbox" id="mac" name="os" value="Mac" checked>
    <label for="mac">Mac</label>
  	<input type="checkbox" id="linux" name="os" value="Linux">
    <label for="linux">Linux</label>
  <button id="remove-btn">全てのチェックを外す</button>
</div>

<script>
window.addEventListener('DOMContentLoaded',function(){
  const os = document.getElementsByName('os');
  const removeBtn = document.getElementById('remove-btn');
  removeBtn.addEventListener('click', removeFunc,false);
  
  function removeFunc(){
    for(let i = 0; i < os.length; i++){
      os[i].checked = false; // ①
    }
  }
});
</script>