jquery - jquery检查/取消选中事件触发器

Question

我有这个代码可以通过一半

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

现在，选中复选框时 cssbox 会放大，但未选中时 cssbox 会继续变大。如何修复它，以便在未选中时恢复到原始大小？

Answer 1

使用change代替click（否则通过跳格和使用空格键将绕过您的代码）。此外，根据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);
});

Answer 2

试试下面的东西，

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

Answer 3

$(function(){
    var isSmall=true;
    $('#checkbox').click(function () {
        if(isSmall)
        {
           $('.cssBox').animate({height:'+=50px'}, 500);
        }
        else            
        {
           $('.cssBox').animate({height:'-=50px'}, 500);
        }
       isSmall=!isSmall;
    });        
});​

示例：http: //jsfiddle.net/2nU7b/4/