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

时间:2014-05-09 22:54:12

标签: javascript jquery ruby-on-rails-3 dom checkbox

当选中复选框时,我试图更改元素的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")
      });
    };

我是JQuery和Javascript的新手,我确信我错过了一些简单的东西。有什么建议吗?

1 个答案:

答案 0 :(得分:1)

如果你试过这个怎么办:
改变这样的元素的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")
  });
});