Topic: suggestion for a select all checkbox ?

hello there,

i have a bunch of checkboxes that i would like to incorporate a select all button for.
the code looks like this:

<% @sites.each do |site| %>
    <tr>
    <td> <%= check_box_tag "site_ids[]", site.id %> </td>
    <td> <%= site.site_name %>  </td>
    </tr>
<% end %>

i have tried a couple of javascript examples out there, but i think they are getting hung up on the site_ids[] part of the checkbox id.

is anyone out there doing something similar ?

thanks

Re: suggestion for a select all checkbox ?

Prototype (the javascript library that ships with Rails) is really incredible and can help you out here.  What you need is to make sure your checkboxes have a class attribute set.  I'll assume your form is called 'my_form' (<form id="my_form" action="">) and the checkboxes have the class 'check'.

Here's a button that should do the trick:

<input type='submit' value='Check All' onClick="$$('#my_form input.check').each(function(box){box.checked=true});return false;" />

That's untested, but it should work.

Re: suggestion for a select all checkbox ?

wow, thanks very much !

Re: suggestion for a select all checkbox ?

I can't seem to get this to work,  I click the butotn and nothing happens.  I don't get any erorrs in my javascript console or anything.  I'm trying to use it with a checkbox instead of a button, but I couldn't ge the button to work either.  I have the the tag in my header

<%= javascript_include_tag :defaults %>

<form name="my_form" action="">
<h1>Filter recipients</h1>
<p>Select the contacts you'd like to publish to and press publish when ready...</p>
<h3>User Type</h3> 
<table><tr><td colspan="3">

<input type="checkbox" name="types[]" class="check" value="All" onClick="$$('#my_form input.check').each(function(box){box.checked=true})">All
</td></tr><tr>
<% i = 0 %>
<% for user_type in @user_types %>
<td><input type="checkbox" class="check" name="types[]" value="<%= user_type.name %>" /><label for="filter_types"><%= user_type.name %></td>
<% i = i + 1 %>
<% if i > 2 %>
<% i = 0 %>
</tr><tr>
<% end %>

<% end %>

Re: suggestion for a select all checkbox ?

Oops I noticed I had form name="my_form" instead of form id="my_form"

Now the select all works, but is there a way to unselect them when I click it again?

Thanks!

Re: suggestion for a select all checkbox ?

Solved it

<input type="checkbox" name="types[]" value="All" onClick="$$('#my_form input.check').each(function(box){box.checked=!box.checked})">All

Works great thanks danger!

Re: suggestion for a select all checkbox ?

This does not select or unselect All. It toggles selections. Any idea on how I can select or unselect all and not toggle. Thanks!

Re: suggestion for a select all checkbox ?

This will do for you:

<input id="check_all" name="check_all" type="checkbox" onclick="Form.getInputs('my_form', 'checkbox').each(function(box){box.checked = $('check_all').checked})" />

Regards

Re: suggestion for a select all checkbox ?

If you want the boxes to toggle back and forth instead of just checking all, try something like:

<input type='submit' value='Check All' onClick="$$('#my_form input.check').each(function(box){box.checked=(box.checked==false)?true:false});return false;" />

Also, if you want to do a checkbox instead of a button, use the following:

<%= check_box_tag('check_all', 'check_all', false,  :onClick => "$$('#my_form input.check').each(function(box){box.checked=(box.checked==false)?true:false});") %>

Thanks for the code, worked great!

Last edited by blaineosiris (2010-03-16 16:39:33)

Re: suggestion for a select all checkbox ?

Just thought I'd throw out a slightly better version of this "check all" checkbox

<%= check_box_tag('check_all', 'check_all', false,  :onClick => "$$('#my_form input.check').each(function(box){box.checked=($('check_all').checked)?true:false});")%>

Now regardless of whether or not some of the items in the list you are checking all or none for they will either all get checked or unchecked not simply swapped like the previous solution would do.

The next improvement would be to move this to an external js file, application.js at least so that it's not inline.

-Jon

Last edited by JonKinney (2010-06-04 23:02:28)

Re: suggestion for a select all checkbox ?

hello to all i am new here