根据单选按钮值显示/隐藏页面加载时的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会根据选择的值进行显示或隐藏。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云