jquery - jqueryのチェック/チェック解除イベントトリガー

Question

私は途中で動作するこのコードを持っています

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

現在、チェックボックスをオンにするとcssboxが拡大しますが、チェックを外すとcssboxは大きくなり続けます。チェックを外すと元のサイズに戻るように修正するにはどうすればよいですか？

Answer 1

以下のようなものを試してください、

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

Answer 2

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 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/