CoffeeScriptとjQueryの実例

フォーム関連

フォーム共通

フォームのオブジェクトを取得する

id指定
View
<%= form_for(@page) do |f| %>
  <%= f.text_field :title %>
<% end %>
CoffeeScript
$ ->
  page_title = $('#page_title')
class指定
View
<%= form_for(@page) do |f| %>
  <%= f.text_field :title, class: "title" %>
<% end %>
CoffeeScript
$ ->
  title = $('.title')
name指定
View
<%= form_for(@page) do |f| %>
  <%= f.text_field :title %>
<% end %>
CoffeeScript
$ ->
  title = $('[name="page[title]"]')

テキストボックス

テキストを取得
View
<%= form_for(@page) do |f| %>
  <%= f.text_field :title %>
<% end %>
CoffeeScript
$ ->
  page_title = $('#page_title')
テキストを設定
View
<%= form_for(@page) do |f| %>
  <%= f.text_field :title %>
<% end %>
CoffeeScript
$ ->
  $('#page_title').val('テキスト')

チェックボックス

チェックボックスがチェックされているか
View
<%= form_for(@page) do |f| %>
  <%= f.check :flag %>
<% end %>
CoffeeScript
$ ->
  page_flag = $('#page_flag').attr('checked')
チェックボックスをチェック済みにする
View
<%= form_for(@page) do |f| %>
  <%= f.check :flag %>
<% end %>
CoffeeScript
$ ->
  $('#page_flag').val(['1'])

ラジオボタン

ラジオボタンのvalue値を取得
View
<%= form_for(@page) do |f| %>
  <%= f.radio_button :flag, 'rails', {checked: true} %>
  <%= f.radio_button :flag, 'ruby', {} %>
<% end %>
CoffeeScript
$ ->
  $('[name="page[:flag]"]:checked').val()
指定のvalue値を持つラジオボタンを選択
View
<%= form_for(@page) do |f| %>
  <%= f.radio_button :flag, 'rails', {} %>
  <%= f.radio_button :flag, 'ruby', {} %>
<% end %>
CoffeeScript
$ ->
  $('[name="page[:flag]"]').val(['ruby'])

リストメニュー

選択されているオプションのvalue値を取得
View
<%= form_for(@page) do |f| %>
  <%= f.select :category, ['rails', 'ruby'] %>
<% end %>
CoffeeScript
$ ->
  $('[name="page[:category]"]').val()
指定のvalue値を持つオプションを選択
View
<%= form_for(@page) do |f| %>
  <%= f.select :category, ['rails', 'ruby'] %>
<% end %>
CoffeeScript
$ ->
  $('[name="page[:category]"]').val(['ruby'])
オプション要素を追加
View
<%= form_for(@page) do |f| %>
  <%= f.select :category, ['rails', 'ruby'] %>
<% end %>
CoffeeScript
$ ->
  $('[name="page[:category]"]').append($('<option>').val('perl').text('perl'))
オプション要素を削除
View
<%= form_for(@page) do |f| %>
  <%= f.select :category, ['rails', 'ruby'] %>
<% end %>
CoffeeScript
$ ->
  $('[name="page[:category]"]').children('[value=rails]').remove()
要素を一括で削除
View
<%= form_for(@page) do |f| %>
  <%= f.select :category, ['rails', 'ruby'] %>
<% end %>
CoffeeScript
$ ->
  $('[name="page[:category"]').empty()