Javascript 选中复选框时，JQuery更改类并显示div

选中复选框后，我试图更改一个元素的CSS类并显示另一个元素。 目前，我有一个非常不专业的代码，并重复以下更改0为1，2，3等

    $("#form-0").hide();
    $('#checkbox-0').click(function () {
      $("#form-0").toggle(this.checked);
      $("#div-0").toggleClass("new_class")
    });

它与我冗长的代码配合得很好；然而，当我尝试使用for循环进行迭代时，它会中断。没有错误，但未显示元素，且未更改类

    for (var i=0; i <= 10; i++) {
      $("#form-"+i).hide();
      $('#checkbox-'+i).click(function () {
        $("#form-"+i).toggle(this.checked);
        $("#div-"+i).toggleClass("new_class")
      });
    };

---

for（var i=0；i如果您尝试这样做会怎么样：
像这样更改元素的html：

<input type="checkbox" id="checkbox-0" class="MYCHECKBOX" />

$for (var i=0; i <= 10; i++) {
    $("#form-"+i).hide();
}
$('.MYCHECKBOX').each(function(index, element) {
  $(element).click(function () {
    $("#form-"+index).toggle(this.checked);
    $("#div-"+index).toggleClass("new_class")
  });
});



然后像这样通过它们：

<input type="checkbox" id="checkbox-0" class="MYCHECKBOX" />

$for (var i=0; i <= 10; i++) {
    $("#form-"+i).hide();
}
$('.MYCHECKBOX').each(function(index, element) {
  $(element).click(function () {
    $("#form-"+index).toggle(this.checked);
    $("#div-"+index).toggleClass("new_class")
  });
});

$for（var i=0；i P.S.
i很漂亮！谢谢你。这非常好，是一段干净的代码。非常感谢！仅出于我个人的理解，在迭代类时，索引总是从0开始吗？是的，索引将从0开始。