Select All/None Checkboxes but not affect Raido Buttons?

Question

Rails 2.3.5, just using Prototype in this project so far.

I have a form with Check Boxes and Radio buttons. I've been trying several scripts trying to find a way to provide a "Select All" / "Select None" functionality for the checkboxes where the Radio Buttons are not affected. Even scripts where you specifically include the id of the checkboxes will still cause the Radio Buttons to toggle.

Like the top answer (Prototype based) from this question: Select all checkboxes

Even though the function takes the id of the checkboxes, It will affect the radio buttons in the form (the last radio button will end up being selected).

A couple of scripts I tried went by the name of the checkboxes, but the name of them in my case is name="selected_contacts[]" for an array, and I couldn't figure out how to get Javascript to accecpt a name with brackets in the function.

I haven't had any luck w/ Google so far. Is it possible to toggle checkboxes w/o affecting radio buttons in the same form?

Thank You!

score 4 · Accepted Answer · answered Feb 13 '11 at 19:07

4

Using jQuery you can do like this...

$("[type='checkbox']","#containerId").each(function(){ this.checked = true });

It's always works for me.

answered Feb 13 '11 at 19:07

Volodymyr

126
1
3

+1 for working code, and welcome to Stackoverflow! (Additional kudos on paying attention to the markdown formatting of code on possibly your first go..!) =) – David Thomas Feb 13 '11 at 19:34
I had to install jQuery (as 'noconflict' - invested in Prototype with this app) but it's really short and simple and works great. Thanks a bunch! – Reno Feb 13 '11 at 23:53

score 2 · Answer 2 · edited May 23 '17 at 10:24

While @Ice83's answer will work, it's slightly more concise to use an alternate form of selector:

$('form').find('input:selector').each(
    function() {
        $(this).attr('checked',true);
    });

This is because, internally (certainly as of jQuery 1.4.4) using a context for the selector causes jQuery to call find() internally, anyway. Obviously, if you're not using a classic form element, change the $('form') to represent the element with which you're containing your checkboxes.

And the input:checkbox selector is just a little more concise.

It's worth noting, of course, that these are, at best, micro-optimisations.

Edited with reference to @Po' Lazarus' comment:

The each() method is, indeed, redundant. The following would work just as well (I've not benchmarked whether it'd be faster, though):

$('form').find('input:checkbox').attr('checked',true);

It probably is faster, I just haven't bothered to verify it.

Edited (again) now I've read the question properly:

The following allows you to select/deselect all options:

$('#selectAll').change(
    function(){
        if ($(this).is(':checked')) {
            $('#options').find('input:checkbox').attr('checked',true);  
        }
        else {
            $('#options').find('input:checkbox').removeAttr('checked');  
        }
    });

Simple JS Fiddle demo

`each` seems to be redundant... `$('form').find('input:selector').attr('checked',true);` — Po' Lazarus, Feb 13 '11 at 19:33
@Po' Lazarus: thanks! Edited that into the answer. I always forget that a selector will return an array, rather than just the first element of the matched set. In my defence, I've been ill recently... =p — David Thomas, Feb 13 '11 at 19:37
I liked Ice83's really short method but this really helped educate me - thank you! — Reno, Feb 13 '11 at 23:55

score 0 · Answer 3 · answered Feb 13 '11 at 19:42

Here's one way to do it that stores the overall state of the toggle control as data on that control itself:

$('#your_toggle_control').click( function(e){
  e.preventDefault();
  // what is the overall toggle state?
  var thisState = $(this).data('boxes-checked');
  if( thisState == undefined ){
    $(this).data('boxes-checked',true); // first time, set initial state on
  }
  $('#yourform').find(':checkbox').attr('checked', thisState); // check/uncheck
  $(this).data('boxes-checked', !thisState); // toggle state of the control
});

Select All/None Checkboxes but not affect Raido Buttons?

3 Answers3