如果复选框在轨道上的ruby中被锁定,则显示表单的其余部分

Question

我需要问我的用户是否会使用信用卡支付服务...如果它选中了pay_with_card选项？它必须显示表格的其余部分,要求其他数据,如卡号,邮件等,如果用户没有检查它,它必须显示一条消息,问题是......我该怎么做？提前致谢

<%= form_for(@product) do |f| %>
  <%= f.label :pay_with_card? %>
  <%= f.check_box :pay_with_card,{}, "Yes", "No"%>
  <div>
    <%= f.label :card_number %> <%= f.text_field :card_number %>
  </div>  
  <div>
    <%= f.label :mail %> <%= f.text_field :mail %>
  </div>
<% end %>

Answer 1

制作卡号/邮件详细信息div style ="display:none;",然后在复选框中添加一些javascript以将其更改为display:block;

像这样的东西:

<%= form_for(@product) do |f| %>
  <%= f.label :pay_with_card? %>
  <%= f.check_box :pay_with_card,{}, "Yes", "No"%>
  <div id="card_details" style="display:none;">
    <%= f.label :card_number %> <%= f.text_field :card_number %>
    <%= f.label :mail %> <%= f.text_field :mail %>
  </div>
<% end %>
<script type="text/javascript">
  var checkbox = document.getElementById('product_pay_with_card');
  var details_div = document.getElementById('card_details');
  checkbox.onchange = function() {
     if(this.checked) {
       details_div.style['display'] = 'block';
     } else {
       details_div.style['display'] = 'none';
     }
  };
</script>

Answer 2

使用jQuery怎么样？

首先,将您的信用卡字段包装在具有credit_card_fields类的div中,然后将此JS代码添加到您的页面:

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