【JavaScript】チェックボックスの値を取得する方法

<input type="checkbox" id="sample1" value="サンプル1">
<label for="sample1">サンプル1</label> <!-- value：サンプル1 -->

<input type="checkbox" id="sample1" checked>  <!-- true -->
<label for="sample1">サンプル1</label>

<input type="checkbox" id="sample2">          <!-- false -->
<label for="sample2">サンプル2</label>

<div>
  <input type="checkbox" id="sample" value="サンプル">
  <label for="sample">サンプル</label>
  <p>チェックボックスの値は「<span id="sample-output"></span>」です</p>
</div>

<script>
window.addEventListener('DOMContentLoaded',function(){
  const sample = document.getElementById('sample'); // ①
  const sampleOutput = document.getElementById('sample-output'); // ①
  sample.addEventListener('change',checkboxStatus,false); // ②
  
  function checkboxStatus(){
    if(this.checked){ // ③
      sampleOutput.textContent = this.value; // ④
    } else {
      sampleOutput.textContent = ""; // ⑤
    }
  }
});
</script>

<div id="score-box">
  <input type="checkbox" id="score1" name="score" value="10">
  <label for="score1">10</label>
  <input type="checkbox" id="score2" name="score" value="20">
  <label for="score2">20</label>
  <input type="checkbox" id="score3" name="score" value="30">
  <label for="score3">30</label>
  <input type="checkbox" id="score4" name="score" value="40">
  <label for="score4">40</label>
  <p>合計値：<span id="sum-score">0</span></p>
</div>

<script>
window.addEventListener('DOMContentLoaded',function(){
  const scoreBox = document.getElementById('score-box'); // ①
  const score = document.getElementsByName('score');     // ①
  let sumScore = document.getElementById('sum-score');   // ①
  scoreBox.addEventListener('change',scoreCalc,false);   // ②
  
  function scoreCalc(){
   let total = 0; // ③
   for(let i = 0; i < score.length; i++){ // ④
    if(score[i].checked){ // ⑤
      total += Number(score[i].value); // ⑥
    }
   }
   sumScore.textContent = total; ⑦
  }
});
</script>