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

Posted 2023-03-05

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

【英文标题】：show rest of a form if a checkbox is ckecked in ruby on rails

【发布时间】：2012-05-06 12:54:32

【问题描述】：

我需要询问我的用户是否会使用信用卡支付服务...如果它选中了 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 %>

【参考方案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>

【讨论】：

感谢@Unixmonkey，它只显示pay_with_card？如果用户按下它应该显示表单的其余部分但它没有，当然我做错了什么......请指导我:)

哦，因为rails给表单元素添加id的方式，应该是var checkbox = document.getElementById('product_pay_with_card');

感谢您的回答，但在您发布的代码中...正如您所说，但代码 var 复选框...等必须在 assets/javascript/application.js 中 ???? ??????

它不必在 application.js 中，但它当然可以去那里。这取决于您喜欢如何组织您的 javascript 代码。我用控制器和动作的数据属性标记我的身体，在我的 document.ready 中，我确定要加载的 JS 文件和要执行的函数，但每个人的做法不同。你没有指定，所以我使用了香草 JS，但如果你加载了 jQuery，你可以使用 makaroni4 的代码，如果你使用的是咖啡脚本，则可以使用 user1047843。

@suely 检查这个问题以获得更多关于放置 javascript 的帮助：***.com/questions/3437585/…

【参考方案2】：

使用 jQuery 怎么样？

首先，用 credit_card_fields 类将您的信用卡字段包装在一个 div 中，然后将此 JS 代码添加到您的页面：

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

【参考方案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 %>

【参考方案4】：

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

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

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

【参考方案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>

【参考方案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 %>

【参考方案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>