Jquery Select All Checkboxes

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 loaded, and the b

Solution 1:

I know I'm revisiting an old thread, but this page shows up as one of the top results in Google when this question is asked. I am revisiting this because in jQuery 1.6 and above, prop() should be used for "checked" status instead of attr() with true or false being passed. More info here.

For example, Henrick's code should now be:

$(function () {
    $('#selectall').toggle(
        function() {
            $('#friendslist .tf').prop('checked', true);
        },
        function() {
            $('#friendslist .tf').prop('checked', false);
        }
    );
});

Solution 2:

Use the jquery toggle function. Then you can also perform whatever other changes you may want to do along with those changes... such as changing the value of the button to say "check all" or "uncheck all".

$(function () {
    $('#selectall').toggle(
        function() {
            $('#friendslist .tf').attr('checked', 'checked');
        },
        function() {
            $('#friendslist .tf').attr('checked', '');
        }
    );
});

Solution 3:

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"));
});

Solution 4:

This is how I toggle checkboxes

$(document).ready(function() {
    $('#Togglebutton').click(function() {
        $('.checkBoxes').each(function() {
            $(this).attr('checked',!$(this).attr('checked'));
        });
    });
});

Solution 5:

maybe try this:

$(function () {
    $('#selectall').click(function () {
        $('#friendslist .tf').attr('checked', this.checked);
    });
});