我试图使用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>
1条答案
按热度按时间n8ghc7c11#
看起来您使用JavaScript来正确地隐藏基于您提供的代码的表单。然而,问题可能与您的jQuery代码选择单选按钮的方式有关。
尝试使用$('input [type=radio][name=number]')来专门选择“name”属性设置为“number”的单选按钮,而不是$('[name=number]')。因此,您的代码应该变得更加特定,并且避免选择具有类似“name”特征的输入字段。
代码如下:
另外,请确保在应用程序中包含了jQuery库。