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

I'm not sure I understand what this question has to do with Rails. This is typically a Javascript question which would require you posting the rendered HTML and retagging the question. — iwasrobbed, Dec 21 '11 at 06:01
should i post the all the html of the entire page? Or is the html for the form enough? — Ramy, Dec 21 '11 at 06:06
I tried to answer your question as best as I could below. For future reference, if it involves changing the page after the page is rendered, it's probably Javascript (unless you are rendering a `.js.erb` file or something like that) — iwasrobbed, Dec 21 '11 at 06:16

score 22 · Accepted Answer · answered Dec 21 '11 at 06:12

22

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

answered Dec 21 '11 at 06:12

iwasrobbed

46,496
21
150
195

awesome! exactly what I was looking for. I'm new to rails, new to web-dev and REALLY new to javascript. Can't thank you enough! – Ramy Dec 21 '11 at 06:25
1

Glad to help, I figured you were new to the frontend side of things :) jQuery is your friend, believe me. If you don't already have it installed in your rails project, see this link: https://github.com/rails/jquery-ujs – iwasrobbed Dec 21 '11 at 06:29
2

Excellent! was looking for whole day!Thanks. – Desingh Jul 23 '13 at 12:44
@iWasRobbed : Sorry dude I have found and issue in your Answer... Try to Select All then uncheck any one option(like Bar1, Bar2, Bar3).. "SElect ALl" must be unchecked... Check my Answer.. – Gagan Gami Jul 08 '14 at 13:20

score 2 · Answer 2 · answered Jan 25 '14 at 02:06

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.

score 1 · Answer 3 · edited May 23 '17 at 11:54

I have found an issue with iWasRobbed's Answer that if Select All is checked and then if you unchecked any one option like (Bar1, Bar2, Bar3) then Select All must be unchecked...

Here is Solution..

HTML Code

<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 Code:

$('#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

score 0 · Answer 4 · answered Oct 28 '19 at 16:23

In case you want to select-all for multiple separate lists on the same page

$("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>

Select All/Deselect All checkboxes in a page

4 Answers4

Working Demo

Linked