如何使用复选框正确过滤数据？

<input type="checkbox" id="grade1" value="1"> Grade 1
<input type="checkbox" id="grade2" value="2"> Grade 2
<input type="checkbox" id="grade3" value="3"> Grade 3

<ul id="studentList">
  <li data-grade="1">John (Grade 1)</li>
  <li data-grade="2">Emily (Grade 2)</li>
  <li data-grade="3">Michael (Grade 3)</li>
</ul>

// 获取复选框元素
var grade1Checkbox = document.getElementById("grade1");
var grade2Checkbox = document.getElementById("grade2");
var grade3Checkbox = document.getElementById("grade3");

// 监听复选框状态变化
grade1Checkbox.addEventListener("change", filterData);
grade2Checkbox.addEventListener("change", filterData);
grade3Checkbox.addEventListener("change", filterData);

// 过滤数据函数
function filterData() {
  // 获取选中的复选框值
  var selectedGrades = [];
  if (grade1Checkbox.checked) {
    selectedGrades.push("1");
  }
  if (grade2Checkbox.checked) {
    selectedGrades.push("2");
  }
  if (grade3Checkbox.checked) {
    selectedGrades.push("3");
  }

  // 过滤数据
  var studentList = document.getElementById("studentList");
  var students = studentList.getElementsByTagName("li");
  for (var i = 0; i < students.length; i++) {
    var grade = students[i].getAttribute("data-grade");
    if (selectedGrades.length === 0 || selectedGrades.includes(grade)) {
      students[i].style.display = "block";
    } else {
      students[i].style.display = "none";
    }
  }
}