选中所有复选框答案

【问题标题】：Select all checkboxes选中所有复选框
【发布时间】：2010-10-27 15:41:30
【问题描述】：

在我的 Rails 应用程序中，我创建了一组复选框，如下所示：

<div class="form_row">
        <label for="features[]">Features:</label>
        <% ['scenarios', 'news', 'role_profiles', 'private_messages', 'chatrooms', 'forums', 'polls'].each do |feature| %>
        <br><%= check_box_tag 'features[]', feature, (@features || {}).include?(feature) %>
        <%= feature.humanize %>
        <% end %>
</div>

我想知道如何创建一个“全选”按钮。

【问题讨论】：

见stackoverflow.com/questions/386281/…

标签： ruby-on-rails forms checkbox

【解决方案1】：

使用 jQuery;

<script type="text/javascript">
      function selectAll(){
        $("input:checkbox").each(function(){
          $(this).attr('checked', true);
        });

        return false;
      }
</script>

HTML 按钮：

<a href="#" onclick="selectAll()">Select All</a>

【讨论】：

这适用于rails 3吗？在我的应用中，由于某种原因，它只检查列表中的第一个框。
退货放错地方了。它应该在最后一个 } 之前，而不是在“每个循环”内

【解决方案2】：

如果您使用 Prototype JS，您可能会发现这篇博文很有帮助。它提供了一种相当简洁的方式来执行全选。

http://www.ryboe.com/2008/07/10/select-all-checkboxes-with-prototype-js.html

在您看来，您可以使用以下 sn-p 创建“全选”链接：

<%= link_to_function("Select All","checkboxes.each(function(e){ e.checked = 1 })") %>

此外，您还需要在同一页面的某处使用以下 Javascript 代码（或者甚至可能抽象到 public/javascripts/application.js 文件中

var checkboxes = [];
checkboxes = $$('input').each(function(e){ if(e.type == 'checkbox') checkboxes.push(e) });
var form = $('options'); /* Replace 'options' with the ID of the FORM element */
checkboxes = form.getInputs('checkbox');

这是一个工作示例的完整源代码，如果这不起作用，您可能需要检查以确保您的 JS 库正确加载。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
      var checkboxes;
      google.load("prototype", "1.6");
      google.setOnLoadCallback(function(){
        checkboxes = [];
        checkboxes = $$('input').each(function(e){ if(e.type == 'checkbox') checkboxes.push(e) });
        var form = $('options'); /* Replace 'options' with the ID of the FORM element */
        checkboxes = form.getInputs('checkbox');
      });
    </script>
  </head>
  <body>
    <form id="options">
      <fieldset><input type="text" value="test"></fieldset>
      <fieldset><input type="checkbox" value=0> 0</fieldset>
      <fieldset><input type="checkbox" value=1> 1</fieldset>
      <fieldset><input type="checkbox" value=2> 2</fieldset>
      <fieldset><input type="checkbox" value=3> 3</fieldset>
    </form>
    <a href="#" onclick="checkboxes.each(function(e){e.checked = 1})">Select All</a>
  </body>
</html>

【讨论】：

添加了工作示例。应该很容易在 Rails 中用“link_to_function”替换链接

【解决方案3】：

我认为你可以使用这样的查询

<script>
$('#check_all').on("click", function(){
  var check = $('input[type="checkbox"]');
    check.prop("checked", !check.prop("checked"));
});
</script>

html 会是这样的

<%= button_tag 'select / unselect all', id: 'check_all', class:'b' %>

【讨论】：