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

It works for me (IE, Safari, Firefox) by just changing your this.checked to 'checked'.

$(function() {
  $('#selectall').click(function() {
    $('#friendslist').find(':checkbox').attr('checked', 'checked');
  });
 });

Answer 2

assuming #selectall is a checkbox itself whose state you want copied to all the other checkboxes?

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

Answer 3

try this

var checkAll = function(){  
var check_all = arguments[0];
var child_class = arguments[1];
if(arguments.length>2){
    var uncheck_all = arguments[2];

    $('#'+check_all).click(function (){
        $('.'+child_class).attr('checked', true);
    });

    $('#'+uncheck_all).click(function (){
        $('.'+child_class).attr('checked', false);
    });

    $('.'+child_class).click(function (){
        var checkall_checked = true;
        $('.'+child_class).each(function(){
            if($(this).attr('checked')!=true){
                checkall_checked = false;
            }
        });
        if(checkall_checked == true){
            $('#'+check_all).attr('checked', true);
            $('#'+uncheck_all).attr('checked', false);
        }else{
            $('#'+check_all).attr('checked', false);
            $('#'+uncheck_all).attr('checked', true);
        }
    });
}else{
    $('#'+check_all).click(function (){
        $('.'+child_class).attr('checked', $(this).attr('checked'));
    });

    $('.'+child_class).click(function (){
        var checkall_checked = true;
        $('.'+child_class).each(function(){
            if($(this).attr('checked')!=true){
                checkall_checked = false;                   
            }
        });
        $('#'+check_all).attr('checked', checkall_checked);
    });
}
};

To "check all" and "uncheck all" is same checkbox

checkAll("checkall_id", "child_checkboxes_class_name");

To "check all" and "uncheck all" is separate checkbox

checkAll("checkall_id", "child_checkboxes_class_name", "uncheckall_id");

Answer 4

So "checked" is a crappy attribute; in many browsers it doesn't work as expected :-( Try doing:

$('#friendslist').find(':checkbox')
    .attr('checked', this.checked)
    .attr('defaultChecked', this.checked);

I know setting "defaultChecked" doesn't make any sense, but try it and see if it helps.

Answer 5

You may try this:

$(function () {
 $('#selectall').click(function () {
  $('#friendslist input:checkbox').attr('checked', checked_status);
 });
});

//checked_status=true/false -as the case may be, or set it via a variable

Answer 6

<input type="checkbox" onclick="toggleChecked(this.checked)"> Select / Deselect All

Now here are  two versions of the toggleChecked function dependent on the semantics of your document. The only real difference is the jQuery selector for your list checkboxes:

1: All checkboxes have a class of  “checkbox” (<input type=”checkbox” class=”checkbox” />)
function toggleChecked(status) {
$(".checkbox").each( function() {
$(this).attr("checked",status);
})
}

2: All the checkboxes are contained within a div with an arbitary id:

<div id="checkboxes">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>

In this case the function would look like this:

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

Have fun!