如果在 ruby​​ on rails 中选中了复选框，则显示表单的其余部分

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();
});

Answer 3

您可以使用 JS 或将 pay_with_card 移出表单，例如：

<%= link_to 'pay with card', your_current_path(:pay_with_card => 1) %>
<%= form_for(...) do |f| %>
  <% if params[:pay_with_card] %>
    <%= # fields for card %>
  <% end %> 
<% end %>

Answer 4

可以通过jQuery来实现，例如：

$ ->
  $('select#pay_with_card').change ->
    if $(this).val() == 'yes'
      $('.card_block').slideDown('fast')
    else
      $('.card_block').slideUp('fast')

假设带有支付卡的表单部分包含在 .card_block 类的 div 中

Answer 5

好的，我的解决方案是：视图中的所有代码，如果用户检查 pay_with_card...（mi 代码是西班牙语），它会显示完整的表单...如果未选中，则不显示任何内容，只是要求付款的同一个复选框...谢谢大家。

function mostrar (){
var checkbox = document.getElementById('chk_tarjeta');
if (checkbox.checked)
document.getElementById("card_details").style.display = "block";
else
document.getElementById("card_details").style.display = "none";
</script>

<h1>Forma de Pago</h1>
<%= form_for(@product) do |f| %>
<div id="product_pay_with_card">
<div >
<%= f.label :paga_con_tarjeta? %></br>
<%= f.check_box :paga_con_tarjeta, :id => "chk_tarjeta", :onclick => "mostrar();" %>
<div>
</div>
</div>
<div id="card_details" >
<div>
<%= f.label :numero_de_tarjeta %></br>
<%= f.text_field :numerotarjeta %>
</div>
<div>
<%= f.label :codigo_de_seguridad %></br>
<%= f.text_field :codigoseguridad %>
</div>

Answer 6

这对我有用 form_with 模型和引导
使用对您的表单有意义的 id 更改 my_hidden_​​form。
原始代码是haml

= form_with scope: :model, url: models_path, local: true do |form|
            .row
              .col-6
                .form-group
                  %h5.mb0 THE CASE TO TICK
                  = form.check_box :form_value, {:data => {:aria => {controls: :my_hidden_form, expanded: false}, :toggle => "collapse", :type => "checkbox", :target => "#my_hidden_form" }}

            .row
              .col-6
                .form-group.collapse#my_hidden_form
                  %h5.mb0 THE FORM TO SHOW WHEN CASE IS TICKED
                  = form.text_field :name, placeholder: "A name"

            .row
              .col-md-12.text-right
                = form.submit 'Submit', class: "btn btn-primary"

用https://haml2erb.org/转换成erb/html

<%= form_with scope: :model, url: models_path, local: true do |form| %>
<div class="row">
  <div class="col-6">
    <div class="form-group">
      <h5 class="mb0">THE CASE TO TICK
        <%= form.check_box :form_value, {:data => {:aria => {controls: :my_hidden_form, expanded: false}, :toggle => "collapse", :type => "checkbox", :target => "#my_hidden_form" }} %>
      </h5>
    </div>
  </div>
</div>
  <div class="row">
    <div class="col-6">
      <div class="form-group collapse" id="my_hidden_form">
        <h5 class="mb0">THE FORM TO SHOW WHEN CASE IS TICKED
          <%= form.text_field :name, placeholder: "A name"  %>
        </h5>
      </div>
    </div>
  </div>
<div class="row">
  <div class="col-md-12 text-right">
    <%= form.submit 'Submit', class: "btn btn-primary" %>
    </div>
  </div>
<% end %>

Answer 7

由于@Unixmonkey 建议的方法对我不起作用，因此我使用事件侦听器进行了一些细微的改动。

<script type="text/javascript">
const checkbox = document.getElementById('product_pay_with_card');
const details_div = document.getElementById('card_details');

checkbox.addEventListener("change", (event) => {
  if (event.currentTarget.checked) {
    details_div.style['display'] = 'block';
  }
  else {
    details_div.style['display'] = 'none';
  }
});
</script>