如何为 Rails 3.2 索引页面中的每一行添加一个复选框？答案

【问题标题】：How to add a checkbox for each row in Rails 3.2 index page?如何为 Rails 3.2 索引页面中的每一行添加一个复选框？
【发布时间】：2014-07-27 05:10:45
【问题描述】：

我们想在 Rails 索引页面上的每一行添加一个复选框来标记该行。此复选框不是对象的一部分（数据库中没有复选框布尔值）。当索引页面显示时，用户可以在以下过程中选中该框以触发该行的事件：

#objects/checkbox_index.html.erb    
<table>
  <tr>
    <th>CheckBox</th>
    <th>Object Name</th>
    <th>Object ID</th>
  </tr>
  <%= @objects.each do |obj| %>
    <tr>
      <td><%= checkbox %></td>
      <td><%= obj.name %></td>
      <td><%= obj.id %></td>
    </tr>
  <% end %>
</table>

在控制器中，流程是这样的：

@objects.each do |obj|
  some_event if obj.checked
end

有几个问题我们不太明白：

1. How to declare an array checkbox variable on the form and link it to each row of obj? We have been using `attr_accessor` to declare var for a form. 
2. How to retrieve each row on checkbox_index form and pass them back to controller?  We are using simple_form for new/edit.

谁能指出这种行为的任何好例子，或者建议我们应该考虑什么？非常感谢。

【问题讨论】：

您似乎想使用 Javascript 而不是 Ruby 来监听事件。您是否考虑将 javascript 事件侦听器添加到未附加到表单的复选框？
想了解更多关于这个想法的信息。
我为此留下了答案，但我只是想补充一点，将 attr_accessor 用于此类事情是个坏主意，你不知道你的 attr_accesor 是一个布尔值，所以如果你有1 或 "blabla" 之类的值将返回 true，另一方面，nil 之类的情况将返回 false，有用于管理的宝石在这种情况下，它会记住原始值，因此您可以确定您的属性访问器的 true 并且只有两个比较，例如是否更改，但是对于我理解您想要的内容来说这太过分了，问候！

标签： jquery ruby-on-rails ruby-on-rails-3 checkbox erb

【解决方案1】：

对此的一种解决方案是将 Javascript 事件侦听器添加到不属于表单的复选框。如果您想要触发的操作是数据库调用，您可以使用 ajax 来执行此操作。如果不坐下来编写所有这些 javascript 代码，Ruby 和伪 javascript 代码可能看起来像这样：

红宝石

<% @objects.each do |obj| %>
    <%= check_box_tag, class: "checkbox" %>
<% end %>

Javascript/JQuery

$('#checkbox').on change {
    if selected == selected
        do what you are trying to do on $(this).element (like an ajax call)
    else
        undo what you did
    end
}

【讨论】：

【解决方案2】：

为了识别每个复选框，您应该使用，它将返回您的控制器和数组，其中包含您所使用的对象的所有 id检查提交，检查Ryan Bates 的视频，这是我学习这项技术的地方，问候

【讨论】：

另一件事，那一集中唯一过时的是路线上的路径，所以你应该使用类似answer的东西，祝你好运

【解决方案3】：

如果您只需要一种获取信息/影响单击复选框的行的方法，那么这可能会有所帮助。

JS：

$('yourTableHere').on('click', 'input', function(){
    $(this).parentsUntil('tr').toggleClass('active'); // any functionality can go here
});

Demo Fiddle

【讨论】：