Rails 3.1 全选复选框答案

【问题标题】：Rails 3.1 Select All checkboxRails 3.1 全选复选框
【发布时间】：2012-03-22 15:44:35
【问题描述】：

这是我的看法：

 @bulk_objects.each do |bulk_warehouse|
      bulk_error = @wh_errors[:"bulk_warehouse#{@count}"] if @wh_errors      
-%>
<tr class="<%= cycle("odd", "even") %>">
             <%= hidden_field_tag("bulk_warehouse_id#{@count}",bulk_warehouse.id) %>
               <td><%= text_field_tag("bulk_warehouse_asset#{@count}", bulk_warehouse.asset, :disabled => true)%></td>
              <td><%= text_field_tag("bulk_warehouse_serial#{@count}", bulk_warehouse.serial, :disabled => true) %></td>



              <td><%= check_box_tag "enable_record#{@count}",1,false,{:onclick => "bulk_warehouse_asset#{@count}.disabled = 
                                                                                bulk_warehouse_serial#{@count}.disabled = 
                                                                                !this.checked;"}%></td>



                    <td class="last">
                <%= link_to "#{t("web-app-theme.delete", :default => "Delete")}", bulk_warehouse_path(bulk_warehouse), :method => :delete, :confirm => "#{t("web-app-theme.confirm", :default => "Are you sure?")}" %>
              </td>


            </tr>
          </div>          
    <%  @count = @count +1 %>
 <% end -%>
      </table>
       <div class="actions-bar wat-cf">
    <div class="actions">
    </div>
 ..

这是我的控制器：

 @bulk_objects = BulkWarehouse.all
                         @count= @bulk_objects.count

现在我将在我的视图中添加一个“全选”复选框，当您单击它时，它会启用所有其他“启用记录#{@count}”复选框。我知道这件事应该使用 Ajax 和 Jquery 来完成，但我不知道怎么做。任何人都可以帮助我吗？谢谢你

【问题讨论】：

标签： ajax ruby-on-rails-3

【解决方案1】：

您可以使用 button_to_function 创建一个按钮，该按钮将选中/取消选中表单上的所有框。

将此代码放在您希望选中/取消选中按钮所在的视图中。单击按钮时，它将运行 toggleChecked javascript 函数。

<%= button_to_function "Check / Uncheck All", "toggleChecked()" >

将您的 javascript 代码放在视图的底部。

<script type='text/javascript'>
    var toggleChecked = function() { $('input[type="checkbox"]').click(); });
</script>

该函数也可以放入 assets/javascripts 中的相应 .js 文件中。

这应该可以让您启动并运行。

--------------- 更新 ------

Button_to_function 现已弃用。我建议使用 HTML5 按钮和 jQuery 来处理这个问题。

查看按钮的代码：

<button type="button" id="check_all">
    Check / Uncheck All
</button>

Javascript：

<script type='text/javascript'>
    $('#check_all').on("click", function(){ $('input[type="checkbox"]').click(); });
</script>

【讨论】：

button_to_function 现在已弃用。下一个最好的事情是什么？
@FletchRichman 感谢您提出的编辑建议。我不知道为什么那些人拒绝了它。我会相应地更新答案。
我已经搜索了高低如何做到这一点，其他一切都失败了，这很简单，就像一个魅力！谢谢！

【解决方案2】：

只是为了扩展@Aaron 的答案，这将解决 OP 的问题，而无需更改页面上的其他复选框：

$('#check-all').click(function(e) {
  var checkboxes = $(e.target).closest('table').find('input:checkbox');
  var checked = $(e.target).attr('checked') === undefined;
  checkboxes.attr('checked', checked);
  checkboxes.not('#check-all').click(function() {
    $(e.target).attr('checked', false);
  });
});

如果其中一个框未被选中，它还具有取消选中全选框的好处。

【讨论】：