Rails：在form_for单选按钮上调用JS函数

Question

我有一个带单选按钮的form_for，并且当单选按钮更改时我想调用一个javascript函数。

单选按钮用于布尔类型的章节字段'type'。

<%= form_for([book.category, book, chapter], remote: true) do |f| %> 

    <%= f.radio_button :type, true, onKeyUp: "alert('hi')", checked: 'checked' %> 
    <%= f.label :type, 'Link' %> 

    <%= f.radio_button :type, false, onKeyUp: "alert('hi')" %> 
    <%= f.label :type, 'Text' %> 

<% end %> 

我试过onchange和onclick以及。我试过在选项前添加一个{}，并且我从Rails得到一个错误，那里有太多参数。

最后，我想打电话给隐藏/显示其他文本字段的功能，但我甚至不能警报执行！

我敢肯定，这是很简单的东西，但是我已经太长时间寻找答案上网本的方式。谢谢你的帮助！

Answer 1

这段代码实际上与onclick事件工作，检查与开发者扩展类似Firebug生成的HTML代码在浏览器中，以确保属性已正确设置。

<%= form_for([book.category, book, chapter], remote: true) do |f| %> 

    <%= f.radio_button :type, true, checked: 'checked', onClick: "alert('hi TRUE!');" %> 
    <%= f.label :type, 'Link' %> 

    <%= f.radio_button :type, false, onClick: "alert('hi False!');" %> 
    <%= f.label :type, 'Text' %> 

<% end %> 

---

另一种方法是使用数据标签和定义行为然后将其绑定的JavaScript（参考：http://blog.bigbinary.com/2012/10/10/data-behavior.html）：

<%= form_for([book.category, book, chapter], remote: true) do |f| %> 

    <%= f.radio_button :type, true, checked: 'checked', data: {behavior: "clickable"} %> 
    <%= f.label :type, 'Link' %> 

    <%= f.radio_button :type, false, data: {behavior: "clickable" } %> 
    <%= f.label :type, 'Text' %> 

<% end %> 

JavaScript的：

$(document).ready(function() {  
    $('input[type="radio"][data-behavior="clickable"]').click(function(evt) { 
    alert("you chose the option: " + $(this).val()); 
    }); 
}); 

---

让我们把这个延伸到你的sce纳里尼奥用于隐藏/显示其他的东西：

查看ERB：

<%= form_for([book.category, book, chapter], remote: true) do |f| %> 

    <%= f.radio_button :type, true, checked: 'checked', data: {behavior: "toggle-products"} %> 
    <%= f.label :type, 'Link' %> 

    <%= f.radio_button :type, false, data: {behavior: "toggle-products" } %> 
    <%= f.label :type, 'Text' %> 

<% end %> 

的JavaScript：

$(document).ready(function() { 
    $('input[type="radio"][data-behavior="toggle-products"]').click(function(evt) { 
    if($(this).val() == "true") { 
     $('.products').show(); 
    } else { 
     $('.products').hide(); 
    } 
    }); 
});