ruby-on-rails Rails -显示基于所选单选按钮的自定义表单

lnlaulya  于 2023-04-22  发布在  Ruby
关注(0)|答案(1)|浏览(120)

我试图使用JS来显示自定义表单的基础上的单选按钮的点击.我有一个集合的单选按钮(代码如下).到目前为止的形式是隐藏的,但当我点击按钮,什么都没有发生.我做错了什么?非常感谢你提前.
视图-单选按钮集合

<%= form.collection_radio_buttons(:number, [["1", '1'] ,["2", '2'], ["3", '3'], ["4", "4"], ["5", "5"], ["6", "6"] ], :first, :last) do |b|  %>
 <%= b.label { b.radio_button + image_tag(b.text+'.png') } %> 
 <% end %>

视图- JS

<script type="text/javascript">

    document.getElementById("one").style.display = "none";

    document.getElementById("two").style.display = "none";

$(document).ready(function() {
  $('input[type="radio"][name="number"]').change(function() {
    if (this.value == '1') {
      document.getElementById("one").style.display = "block";
            document.getElementById("two").style.display = "none";

      }
      else if (this.value == '2') {
            document.getElementById("two").style.display = "block";
            document.getElementById("one").style.display = "none";
      }
  });
});
</script>

表格

<p id="one" class="one" style="">
          <%= form.text_area :body, class:'', style:"" %>
        </p>

        <p id="two" class="two" style="">
          <%= form.text_area :body, class:'', style:"" %>
        </p>
n8ghc7c1

n8ghc7c11#

看起来您使用JavaScript来正确地隐藏基于您提供的代码的表单。然而,问题可能与您的jQuery代码选择单选按钮的方式有关。
尝试使用$('input [type=radio][name=number]')来专门选择“name”属性设置为“number”的单选按钮,而不是$('[name=number]')。因此,您的代码应该变得更加特定,并且避免选择具有类似“name”特征的输入字段。
代码如下:

document.getElementById("one").style.display = "none";
document.getElementById("two").style.display = "none";

$(document).ready(function() {
  $('input[type=radio][name=number]').change(function() {
    if (this.value == '1') {
      document.getElementById("one").style.display = "block";
      document.getElementById("two").style.display = "none";
    }
    else if (this.value == '2') {
      document.getElementById("two").style.display = "block";
      document.getElementById("one").style.display = "none";
    }
  });
});

另外,请确保在应用程序中包含了jQuery库。

相关问题