Select All/Deselect All checkboxes in a page

Question

I've looked at this which seems to have no effect on my code. I've tried this which seems to only affect the first checkbox, but doesn't uncheck the checkbox when i click it again anyway.... I've also seen some other ways of doing it that I'm not certain are entirely Rails-esque (or whatever the term should be).

So, could someone please point me in the right direction?

Here is my view:

<%= 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 %>

Answer 1

If using jquery, you can use the following (coffeeScript):

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

I found an issue trying to set this.checked = false - not really sure what was happening, but the above code worked.

Answer 2

Here's a working example for you: http://jsfiddle.net/wYPWL/

HTML example:

<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;                        
       });
   } 
});

This will work regardless of what your checkboxes are named. If you really wanted to target only your checkboxes shown in your code above, you can replace $(':checkbox') with $('input[id^="distribution_ids"]') which is jQuery's way of targeting input elements that have an ID that starts with distribution_ids