Select and Unselect a group of Checkboxes with jQuery

Question

let's start from the beginning, but please don't panic... is a Jquery issue ;-)

I writing a PHP code: the user sends a query to our database and the form shows sets of results, grouped in tables, with checkboxes to select the data.

I would like to know how to enable a Jquery code to run with a Select/Deselect checkbox, to Select/Deselect the data of each table, i mean, each set of results.

For example, something like this example http://www.wiseguysonly.com/2010/01/15/select-and-unselect-all-checkboxes-with-jquery/

1: All checkboxes have a class of “checkbox”: input type=”checkbox” class=”checkbox”

function toggleChecked(status) {
    $(".checkbox").each( function() {
        $(this).attr("checked",status);
    });
}

Could you tell me what is the best way to modify the toggleChecked function?

A second parameter to call toggleChecked, to replace ".checkbox" with the second parameter value? (i'm unable to find the correct syntax to do it).

Or there is a different way to do it?

And, BTW, is better to use prop instead attr? Best regards.

Yes, better to use prop(). And here is something that should have turned up in your search: http://stackoverflow.com/questions/5229023/jquery-check-uncheck-all-checkboxes-with-a-button — Jay Blanchard, Dec 03 '12 at 16:41
Maybe i'm confused, but is not exactly the same, right? All code examples are for just one set of checkboxes. I don't know how select a certain group of checkboxes or #slaves checkboxes... — David García Aristegui, Dec 03 '12 at 16:49
You take that concept and apply it to checkboxes that you have designated to be part of a group. — Jay Blanchard, Dec 03 '12 at 16:51

score 4 · Answer 1 · answered Dec 03 '12 at 16:43

Just add a second parameter to the function, and use it.

function toggleChecked(status,selector) {
    $(selector).each(......);
}

If you are honestly struggling with something as simple as this, you really shouldn't be using jQuery yet. You should learn about plain JavaScript first. Otherwise it's like going to a construction site with the best tools in the world, maybe even the knowledge of how to use those tools perfectly... but with no idea how basic construction works, you'd probably make a beautiful building with no foundations that would collapse within a day.

Joe · Answer 2 · 2012-12-03T16:58:57.543

3

Example

jQuery.is really helps in the case or prop("checked") will return a boolean (so either way):

var boxes = $(".checkbox");
boxes.prop("checked", !boxes.prop("checked"));

And yes, jQuery.prop is better.

edited Dec 03 '12 at 16:58

answered Dec 03 '12 at 16:44

Joe

80,724
18
127
145

$(".checkbox").prop("checked",boolean) seems better – A. Wolff Dec 03 '12 at 16:48
Your sample doesn't work correctly due to selector context. This works as expexted: http://jsfiddle.net/FcsvJ/3/ – A. Wolff Dec 03 '12 at 16:58

score 0 · Answer 3 · answered Dec 03 '12 at 17:03

Well, I know you already got the answer, but... here is my version:

$.fn.changeCheckboxesState = function(state){
        if (state === undefined)
            state = true;

        $(this).filter(':checkbox').each(function() {
            $(this).prop('checked', state);
        });

        return this;
    };
$.fn.toggleCheckboxes = function() {

        $(this).filter(':checkbox').each(function() {
            var $this = $(this);

            $this.prop('checked', !$this.prop('checked'))
        });

        return this;
    };

score 0 · Answer 4 · answered Jul 03 '15 at 08:23

<script>
$(document).ready(function() {
    $('#selecctall').click(function(event) {  
        if(this.checked) { 
            $('.checkbox1').each(function() { 
                this.checked = true;           
            });
        }else{
            $('.checkbox1').each(function() { 
                this.checked = false;                   
            });        
        }
    });

});
</script>

In Cakephp code--

<?php   echo $this->Form->input('selecctall',array('id'=>'selecctall','type'=>'checkbox')); ?>

<?php   echo $this->Form->input('massaction',array('class'=>'checkbox1','label'=>'','type'=>'checkbox')); ?>

Select and Unselect a group of Checkboxes with jQuery

4 Answers4