jquery - 如果选中复选框，则会出现 div

Question

我是 Rails/Jquery 新手，但遇到了问题。我的目标是:如果选中 checkbox(credit_card_fields)，则会出现 div (credit_card_fields)。

这是我的脚本:

<script>
$("input[type='checkbox']#pay_with_card").on('change', function(){
  $('credit_card_fields').toggle();
});
</script>

表格:

<%= form_for(:estudante, :url => {:action => 'create'}) do |f| %>

  <%= f.label :pay_with_card? %>
  <%= f.check_box :pay_with_card,{}, "Yes", "No"%>
  <div id="credit_card_fields" style="display:none;">
    <%= f.label :card_number %> <%= f.text_field :card_number %>
    <%= f.label :mail %> <%= f.text_field :mail %>
  </div>

<% end %>

Answer 1

$("#pay_with_card").change(function(){
  $("#credit_card_fields").toggle($(this).is(":checked"));
});

<!-- THIS HTML IS FOR DEMO PURPOSES ONLY! -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>pay_with_card?</label>
<input type="checkbox" name="estudante[pay_with_card]" id="pay_with_card" checked="checked">
<div id="credit_card_fields">
  <label>card_number</label>
  <input type="text" name="estudante[card_number]">
  <label>mail</label>
  <input type="text" name="estudante[mail]">
</div>