根据单选按钮值显示/隐藏页面加载时的div - Jquery和Ruby on Rails简单表单

问题描述：

我有一个简单的表单，其中包含一个单选按钮和一个div。我想根据单选按钮的值来显示或隐藏div。我使用的是Jquery和Ruby on Rails。

解答：

在Jquery中，你可以使用change事件来监听单选按钮的值的变化，并根据值的不同来显示或隐藏div。以下是一个示例代码：

<%= form_for @model do |f| %>
  <%= f.radio_button :option, "option1", id: "option1" %>
  <%= f.label :option1, "Option 1" %>
  <%= f.radio_button :option, "option2", id: "option2" %>
  <%= f.label :option2, "Option 2" %>
<% end %>

<div id="div1" style="display: none;">
  This is div 1.
</div>

<div id="div2" style="display: none;">
  This is div 2.
</div>

<script>
  $(document).ready(function() {
    $('input[type=radio][name=option]').change(function() {
      if (this.value == 'option1') {
        $('#div1').show();
        $('#div2').hide();
      } else if (this.value == 'option2') {
        $('#div1').hide();
        $('#div2').show();
      }
    });
  });
</script>

在上面的代码中，我们首先使用Ruby on Rails的表单帮助器生成了两个单选按钮，并为它们分别设置了id和label。然后，我们定义了两个div，分别为div1和div2，并将它们的显示样式设置为display: none;，即初始状态下隐藏。

接下来，在Jquery的$(document).ready()函数中，我们使用change事件监听了单选按钮的值的变化。当单选按钮的值发生变化时，我们根据值的不同来显示或隐藏相应的div。如果选中的是option1，则显示div1并隐藏div2；如果选中的是option2，则显示div2并隐藏div1。

这样，当用户选择不同的单选按钮时，相应的div会根据选择的值进行显示或隐藏。

推荐的腾讯云相关产品和产品介绍链接地址：