jquery select all checkboxes

Question

I have a series of checkboxes that are loaded 100 at a time via ajax.

I need this jquery to allow me to have a button when pushed check all on screen. If more are lo

Answer 1

A very simple check/uncheck all without the need of loop

<input type="checkbox" id="checkAll" /> Check / Uncheck All

<input type="checkbox" class="chk" value="option1" /> Option 1
<input type="checkbox" class="chk" value="option2" /> Option 2
<input type="checkbox" class="chk" value="option3" /> Option 3

And the javascript (jQuery) accounting for "undefined" on checkbox value

** UPDATE - using .prop() **

$("#checkAll").change(function(){
    var status = $(this).is(":checked") ? true : false;
    $(".chk").prop("checked",status);
});

---

** Previous Suggestion - may not work **

$("#checkAll").change(function(){
    var status = $(this).attr("checked") ? "checked" : false;
    $(".chk").attr("checked",status);
});

OR with the suggestion from the next post using .prop() combined into a single line

$("#checkAll").change(function(){
    $(".chk").attr("checked",$(this).prop("checked"));
});

Answer 2

I created a function that I use on all projects. This is just the initial draft, but maybe it will help:

Function:

function selectAll(wrapperAll, wrapperInputs) {

    var selectAll = wrapperAll.find('input');
    var allInputs = wrapperInputs.find('input');

    console.log('Checked inputs = ' + allInputs.filter(':not(:checked)').length);

    function checkitems(allInputs) {
        //If all items checked
        if (allInputs.filter(':not(:checked)').length === 0) {
            console.log('Function: checkItems: All items checked');
            selectAll.attr('checked', true);

        } else {
            console.log('Function: checkItems: Else all items checked');
            selectAll.attr('checked', false);
        }
    }

    checkitems(allInputs);
    allInputs.on('change', function () {
        checkitems(allInputs)
    });

    selectAll.on('change', function () {
        if (this.checked) {
            console.log('This checkbox is checked');
            wrapperInputs.find(':checkbox').attr('checked', true);

        } else {
            console.log('This checkbox is NOT checked');
            wrapperInputs.find(':checkbox').attr('checked', false);

        }
    });

}

It accepts the 2 parameters where the inputs are wrapped into and you cand use-it like this:

$(function () {

    var wrapperAll = $('.selectallinput');
    var wrapperInputs = $('.inputs');

    selectAll(wrapperAll, wrapperInputs);
});

See demo: http://jsfiddle.net/cHD9z/

Answer 3

Here's a basic jQuery plugin I wrote that selects all checkboxes on the page, except the checkbox/element that is to be used as the toggle. This, of course, could be amended to suit your needs:

(function($) {
    // Checkbox toggle function for selecting all checkboxes on the page
    $.fn.toggleCheckboxes = function() {
        // Get all checkbox elements
        checkboxes = $(':checkbox').not(this);

        // Check if the checkboxes are checked/unchecked and if so uncheck/check them
        if(this.is(':checked')) {
            checkboxes.prop('checked', true);
        } else {
            checkboxes.prop('checked', false);
        }
    }
}(jQuery));

Then simply call the function on your checkbox or button element:

// Check all checkboxes
$('.check-all').change(function() {
    $(this).toggleCheckboxes();
});

As you are adding and removing more checkboxes via AJAX, you may want to use this instead of .change():

// Check all checkboxes
$(document).on('change', '.check-all', function() {
    $(this).toggleCheckboxes();
});

Answer 4

$('#friendslist .tf')

this selector will suit your needs

Answer 5

This may work for both (checked/unchecked) selectall situations:

$(document).ready(function(){
 $('#selectall').click(function () {
   $("#friendslist .tf").attr("checked",function(){return $(this).attr("checked") ? false : true;});
 });
});

Answer 6

The currently accepted answer won't work for jQuery 1.9+. The event handling aspect of the (rather heavily) overloaded .toggle() function was removed in that version, which means that attempting to call .toggle(function, function) will instead just toggle the display state of your element.

I'd suggest doing something like this instead:

$(function() {
    var selectAll = $('#selectall');
    selectAll.on('click', function(e) {
        var checked = !(selectAll.data('checked') || false);
        $('#friendslist .tf').prop('checked', checked);
        selectAll.data('checked', checked);
    });
});

That uses a regular click event handler, plus a data attribute to track the "toggled" status and invert it with each click.