coffeescript + iCheckでのチェックボックスの全選択を実装方法

iCheck
http://icheck.fronteed.com/
※iCheckではイベントのとり方が特殊なので注意

coffeescript側

hoge.coffee

$('#all_check').on "ifChecked", $.proxy(@all_checked, @)
$('#all_check').on "ifUnchecked", $.proxy(@all_unchecked, @)
$('.categories').on "ifChecked", $.proxy(@categories_changed, @)
$('.categories').on "ifUnchecked", $.proxy(@categories_changed, @)

all_checked: (e) ->
  @categories = $('.categories')
  @categories.iCheck('check')

all_unchecked: (e) ->
  if $('.categories :checked').length == $('.categories :input').length
    @categories = $('.categories')
    @categories.iCheck('uncheck')

categories_changed: (e) ->
  if $('.categories :checked').length == $('.categories :input').length
    $('#all_check').iCheck('check')
  else
    $('#all_check').iCheck('uncheck')

template側

hoge.html.erb

<%= check_box_tag :all_check, false, false,{} %>全て選択
<div class="categories">

  <!-- ここのdivの中にチェックボックス郡を配置 -->
  <%= check_box_tag :hogehoge, false, false,{} %>

  <!-- もちろんform_forで複数で対応も -->
　　　　<%= f.check_box :hogehoges, {}, piyo.id, nil %>
</div>

仕組み

チェックボックスを<div class="categories">で囲い

1.全て選択がチェックされたら中の要素を全て
2.全て選択がアンチェックされたら中の要素を全てアンチェック
3.中の要素がチェックorアンチェックされたら、チェック数と要素数と比べて、すべてチェックされていれば全て選択をチェック、それ意外は全て選択をアンチェック

メリット

よくみる実装だと、全て選択を押した後に中の要素をアンチェックしても全て選択がチェックされたままだが、
この方法なら連動してくれる。