jquery检查/取消检查事件触发器

我有一个代码，它工作了一半

jQuery('#checkbox').click(function () {
   jQuery('.cssBox').animate({height:'+=50px'}, 500);
   jQuery('#extra').toggle(this.checked);
});

---

现在，当选中复选框时，cssbox会变大，但如果不选中，cssbox会继续变大。如何修复它，使其在未选中时恢复到原始大小？

尝试以下操作

jQuery('#checkbox').click(function () {
   jQuery('.cssBox').animate({height: ((this.checked)?'+=50px':'-=50px')}, 500);
   jQuery('#extra').toggle(this.checked);
});

---

使用

更改

而不是

单击

（否则，通过选项卡并使用空格键将绕过代码）。另外，根据选中的

状态应用动画：

jQuery('#checkbox').change(function(){
  jQuery('.cssBox').animate({
    height: this.checked   // is it checked?
      ? '+=50px'              // yes, increase by 50px
      : '-=50px'              // no, decrease by 50px
  },500);
  jQuery('#extra').toggle(this.checked);
});

示例：
非常感谢，工作如梦：）。。。简单的解决方案总是最好的。@Splash也使用
更改
，而不是Brad建议的
单击
。全局的，嗯？即使您只是使用
.data
而不是globals（在匿名函数的上下文中是globals）@bradcristie这不是全局的，它在闭包内。@Vega:这就是我在括号中提到上下文的原因。它仍然在事件块之外，这就是我的意思。嗯，没有考虑选项卡/空间的组合。。。谢谢此外，使用您的建议会破坏我的其他jquery函数，但是使用Vega的建议并用更改替换单击效果很好。
$(function(){
    var isSmall=true;
    $('#checkbox').click(function () {
        if(isSmall)
        {
           $('.cssBox').animate({height:'+=50px'}, 500);
        }
        else            
        {
           $('.cssBox').animate({height:'-=50px'}, 500);
        }
       isSmall=!isSmall;
    });        
});​