如何设置复选框来选择关卡

<form>
  <input type="checkbox" id="level1" name="level" value="1">
  <label for="level1">关卡1</label><br>
  <input type="checkbox" id="level2" name="level" value="2">
  <label for="level2">关卡2</label><br>
  <input type="checkbox" id="level3" name="level" value="3">
  <label for="level3">关卡3</label><br>
  <!-- 其他关卡复选框 -->
</form>

// 获取所有关卡复选框的引用
const checkboxes = document.querySelectorAll('input[name="level"]');

// 监听复选框的change事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    if (this.checked) {
      // 用户选择了该关卡
      const level = this.value;
      // 执行相关操作，如记录用户选择的关卡
    } else {
      // 用户取消选择该关卡
      // 执行相关操作，如取消记录用户选择的关卡
    }
  });
});

// 创建一个空数组来存储用户选择的关卡
const selectedLevels = [];

// 在change事件处理程序中更新用户选择的关卡
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    if (this.checked) {
      // 用户选择了该关卡
      const level = this.value;
      selectedLevels.push(level);
    } else {
      // 用户取消选择该关卡
      const level = this.value;
      const index = selectedLevels.indexOf(level);
      if (index > -1) {
        selectedLevels.splice(index, 1);
      }
    }
    
    // 打印用户选择的关卡
    console.log(selectedLevels);
  });
});