Question

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

单选按钮用于章节的字段'type'，类型为boolean。

<%= 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());
  });
});

让我们将其扩展到您隐藏/显示其他内容的场景：

查看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();
    }
  });
});

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

1 个答案: