9

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 %>
3
  • 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, 2011 at 6:01
  • should i post the all the html of the entire page? Or is the html for the form enough?
    – Ramy
    Dec 21, 2011 at 6: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, 2011 at 6:16

4 Answers 4

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

3
  • 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, 2011 at 6: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: github.com/rails/jquery-ujs
    – iwasrobbed
    Dec 21, 2011 at 6:29
  • @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 8, 2014 at 13:20
2

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.

1

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

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.