Question

我有两个隐藏的字段。单击特定单选按钮时，我需要显示字段。我不确定为什么它不起作用。我已经包含了以下代码。

html.erb文件：

<div class="row">
  <div class="mate-photo-label col-sm-4">
    <%= f.radio_button :check_request_type_id, '4' %><br><br>
    <%= f.label :check_request_type_id, 'Commission Invoice', value: '4', class: 'text' %>
  </div>
  <div class="mate-photo-label col-sm-4">
    <%= f.radio_button :check_request_type_id, '2' %><br><br>
    <%= f.label :check_request_type_id, 'Client Refund', value: '2', class: 'text' %>
  </div>
  <div class="mate-photo-label col-sm-4">
    <%= f.radio_button :check_request_type_id, '1' %><br><br>
    <%= f.label :check_request_type_id, 'Landlord Reimbursement', value: '1', class: 'text' %>
  </div>
</div>

html.erb文件＃2：

<div class="commission-fields" style="display: none;">
  <div class="field">
    <%= f.label :commission_collected, "Commission Collected", class: "general-text-label" %><br>
    <%= f.text_field :commission_collected, class: "general-text-field" %>
  </div>
  <div class="field">
    <%= f.label :commission_percentage, "Your Commission Percentage", class: "general-text-label" %><br>
    <%= f.text_field :commission_percentage, class: "general-text-field" %>
  </div>
</div>

js.file：

$(document).ready(function() {
  $('input').change(function() {
    if ($('input[value="4"]').is(':checked')) {
      $('#commission-fields').show();
    }
    else {
      $('#commission-fields').hide();
    }
  });
});

Answer 1

问题是你的jQuery选择器显示隐藏你的元素，改变：

$('#commission-fields').show();

和

$('#commission-fields').hide();

为：

$('.commission-fields').show();
$('.commission-fields').hide();

Answer 2

您似乎没有指向jquery函数库的链接。

尝试在标题中添加：

<script src="jquery-3.2.1.min.js"></script>

隐藏的div不会隐藏/显示单选按钮单击

2 个答案: