Question

The Students Gridview has a Check All checkbox at the top and it controls the on/off of the checkboxes. I want to toggle checkboxes on and off in the Students Grid View. Here is my code:

$(document).ready(function () {
    $("#chkAll").click(function () {
        if ($(this).prop("checked") == "checked") {
            $("#<%= gvStudents.ClientID %> :checkbox").not(this).prop("checked", "checked");
        }
        else {
            $("#<%= gvStudents.ClientID %> :checkbox").not(this).prop("checked", "false");
        }    
    });    
});

It used to work in jQuery 1.4.xx but today I upgraded to JQuery 1.8.1 and it no longer works. What should I need to get it working again?

Answer 1

This is all you should need:

$("#chkAll").click(function () {
    var checkAll = $(this).prop("checked");
    $("#<%= gvStudents.ClientID %> :checkbox").not(this).prop("checked", checkAll);
});   

Live example: http://jsfiddle.net/3ZfzS/

But to make this more intuative, you should probably uncheck the “checkAll” checkbox when one or more of the others are unchecked. This could be done with this addition:

$("#<%= gvStudents.ClientID %> :checkbox").not('#chkAll').click(function(){
    var total = $("#<%= gvStudents.ClientID %> :checkbox").not('#chkAll').size();
    var checked = $("#<%= gvStudents.ClientID %> :checkbox").not('#chkAll').filter(':checked').size();
    $("#chkAll").prop("checked",total == checked);
});

Live example: http://jsfiddle.net/xV2ej/