作ったもの、プログラミングで共有できそうなこと、IT関連でやってみたことなど、なんでも書いていきます。ヤドン可愛い

今日も少し進んだ・・・いい感じ

今日のまとめ

  • coffeescriptを使ってチェックボックスを一括onまたはoffにする機能を実装できた

チェックボックスの一括チェックと、check_box_tag関連

.html.erbを下記のようにします

-----  index.html.erb

 <%= check_box_tag "target", true, true, {:class => "target_all"}  %><%= label_tag("target", '全チェック' %>
   <div class="search_status_target">
     <%= check_box_tag "target1", true, true, {:class => "target"}  %><%= label_tag("target1", 'ターゲット1' %>
     <%= check_box_tag "target2", true, true, {:class => "target"}  %><%= label_tag("target2", 'ターゲット2' %>
     <%= check_box_tag "target3", true, true, {:class => "target"}  %><%= label_tag("target3", 'ターゲット3' %>
   </div>

.coffeeを下記のようにします

-----  pages.coffee

  $target_all = $('.target_all')
  $target = $('.target')

  $target_all.on 'click', ->
      $target.prop('checked', this.checked)

  $target.on 'click', ->
      if $('.search_status_target :checked').length == $('.search_status_target :input').length
          $target_all.prop('checked', 'checked')
      else
          $target_all.prop('checked', false)
  • coffeeの3、4行目だけで、全チェックを押した場合にtargetクラスのチェックボックスを一括on,offが可能。
  • 5行目以降は、target13の全てがチェックされた場合は全チェックもon、一つでもチェックが外れた時に全チェックをoffにする。

check_box_tagのクラス指定や、参考にしたjavascriptをcoffeeに書き直すのに苦労してました。 label_tagの一つ目の要素とcheck_box_tagの一つ目の要素を合わせておけば、ラベルをクリックしてチェックを入れることができるようになるので便利。 あとクラス指定したい時とか、ヘルパーの使い方が書いてある下記サイトが思ったより参考になることがわかった。

Railsドキュメント check_box_tag

他に参考にしたサイト

jQuery 複数チェックボックスの全選択、全部じゃなくなったらチェック外すやつ

CoffeeScript入門メモ

あと1週間くらいで完成させなきゃな

この記事へのコメント

まだコメントはありません