全选/取消全选页面中的复选框

Posted 2023-02-22

【中文标题】全选/取消全选页面中的复选框

【英文标题】：Select All/Deselect All checkboxes in a page

【发布时间】：2012-01-25 00:20:25

【问题描述】：

我查看了this，这似乎对我的代码没有影响。 我试过this，它似乎只影响第一个复选框，但是当我再次单击它时并没有取消选中该复选框...... 我还看到了一些其他的方法，我不确定它们是否完全是 Rails 风格的（或者应该是什么术语）。

那么，有人可以指点我正确的方向吗？

这是我的看法：

<%= render 'admin/distributions/head' %>
<% title 'Workflow' %>


<%= form_for @search, :url => url_for(:controller => params[:controller], :action => params[:action]), :html => id => "distribution_workflow",:method => :get do |f| %>

  <div class="opportunity-block yellow">

    <div class="form-block mrl mbm">
      <%= f.label :created_at_gt, "Created at >" %>
      <%= f.text_field :created_at_gt, :class => "js-db-date-picker" %>
    </div>

    <div class="form-block mrl mbm">
      <%= f.label :created_at_lte, "Created at <=" %>
      <%= f.text_field :created_at_lte, :class => "js-db-date-picker" %>
    </div>

    <div class="form-block mrl mbm mtm">
      <%= f.label :status_equal, "Status" %>
      <%= f.select :status_equal, %w(delivered no_success already_registered qa_complete success follow_up), :include_blank => " " %>
    </div>

    <div class="clear"></div>
    <%= submit_tag 'Apply Filter', :class => "input-button dark unit-right mrl" %>
    <div class="clear"></div>
  </div>
<% end  %>


<%= form_tag edit_multiple_admin_distributions_workflows_path , :id => "workflow_form" do %>
<%= submit_tag "Edit Selected" %>
  <table class="standard-grid"> 
    <tr> 
      <th class="first"> </th>
      <th>ID</th>
      <th>Customer</th>
      <th>Resume URL</th>
      <th>Partner</th>
      <th>Status</th>
      <th>Assigned To</th>
      <th>Comments</th>
    </tr>
    <% @report.each do |distribution| %>
      <tr>
        <td><%= check_box_tag "distribution_ids[]", distribution.id %></td>
        <td>
          <%= distribution.owner.id %>
        </td>
        <td>
          <%=link_to distribution.owner.full_name, "mailto:#distribution.owner.email" %>
        </td>
        <td>
          <a href=<% UrlService.download_blob_url(distribution.resume) %>>Resume URL</a>
        </td>
        <td>
          <%=link_to distribution.matching_profile.partner.title,  "mailto:#distribution.matching_profile.partner.email" %>
        </td>
        <td>
          <%= distribution.status %>
        </td>
        <td>
          <%= distribution.assignee_id ? User.find(distribution.assignee_id).full_name : " " %>
        </td>
        <td>
          <%= distribution.comments %>
        </td>
      </tr>
    <% end %>
  </table>
<% end %>

【问题讨论】：

我不确定我是否理解这个问题与 Rails 有什么关系。这通常是一个 javascript 问题，需要您发布呈现的 HTML 并重新标记问题。

我应该发布整个页面的所有 html 吗？还是表单的html够不够？

我尽量在下面回答您的问题。为了将来参考，如果它涉及在页面呈现后更改页面，它可能是 Javascript（除非你正在呈现 .js.erb 文件或类似的东西）

【参考方案1】：

这是一个适合您的工作示例：http://jsfiddle.net/wYPWL/

HTML 示例：

<input type="checkbox" id="selectAll" value="selectAll"> Select / Deselect All<br/><br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

Javascript：

$('#selectAll').click(function() 
   if (this.checked) 
       $(':checkbox').each(function() 
           this.checked = true;                        
       );
    else 
      $(':checkbox').each(function() 
           this.checked = false;                        
       );
    
);

无论您的复选框被命名为什么，这都将起作用。如果您真的只想针对上面代码中显示的复选框，您可以将 $(':checkbox') 替换为 $('input[id^="distribution_ids"]')，这是 jQuery 定位 ID 以 distribution_ids 开头的输入元素的方式p>

【讨论】：

太棒了！正是我想要的。我是 Rails 新手，是 web-dev 新手，对 javascript 真的很陌生。感激不尽！

很高兴为您提供帮助，我认为您是前端方面的新手 :) jQuery 是您的朋友，相信我。如果您尚未在您的 rails 项目中安装它，请参阅此链接：github.com/rails/jquery-ujs

太棒了！正在寻找一整天！谢谢。

@iWasRobbed ：对不起，伙计，我在您的答案中找到并发布了...尝试全选，然后取消选中任何一个选项（如 Bar1、Bar2、Bar3）.. 必须取消选中“全选” ...检查我的答案..

【参考方案2】：

如果使用jquery，可以使用以下（coffeeScript）：

if (this.checked)
  $(':checkbox').each ->
    $(this).prop('checked', true)                     
else
  $(':checkbox').each ->
    $(this).prop('checked', false)

我在尝试设置 this.checked = false 时发现了一个问题 - 不太确定发生了什么，但上面的代码有效。

【参考方案3】：

我发现 iWasRobbed 的答案存在一个问题，即如果选中 Select All，然后如果您取消选中任何一个选项，例如 (Bar1、Bar2、Bar3 ) 然后Select All 必须取消选中...

这里是解决方案..

HTML 代码

<input id="campaign_range_ids_1" class="checkbox" type="checkbox" value="1" name="campaign[range_ids][]"> India
<input id="campaign_range_ids_2" class="checkbox" type="checkbox" value="2" name="campaign[range_ids][]"> London
<input id="campaign_range_ids_3" class="checkbox" type="checkbox" value="3" name="campaign[range_ids][]"> USA
<input id="campaign_range_ids_4" class="checkbox" type="checkbox" value="4" name="campaign[range_ids][]"> All

JavaScript 代码：

$('#campaign_range_ids_4').click(function () 

    if ($(this).is(':checked')) 
        $('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', true);

     else 
        $('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', false);
    

);

$('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').click(function () 

    if ($(this).is(':checked')) 
         else 
            $('#campaign_range_ids_4').prop('checked', false);
    

);

Working Demo

【参考方案4】：

如果您想为同一页面上的多个单独列表全选

$("input[data-select-all]").on("click", function() 
    let $checkboxes = $("input[data-"+$(this).data("select-all")+"]");
    if (this.checked) 
        $checkboxes.each(function() 
            this.checked = true;
        );
     else 
        $checkboxes.each(function() 
            this.checked = false;
        );
    
);


<table>
  <thead>
  <tr>
    <th><input type="checkbox" name="selected" id="select-all" value="1" title="Select all" data-select-all="select-all-target"></th>
    <th>Asset</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
    <tr>
    <td><span class="form-check"><input type="checkbox" name="selected" id="asset_type_11" value="1" data-select-all-target="true"></span></td>
    <td>The name</td>
    <td>The description</td>
    </tr>
  </tbody>
</table>