Question

The checkAll click function works, however, the uncheckAll click function does not. Anybody see what is preventing it from unchecking all the checkboxes that are checked.

$('#checkAll').click(function (e) {
    e.preventDefault();
    $('#dataTablePageList :checkbox').attr('checked','checked');
    $(this).removeAttr('id').attr('id','uncheckAll');
    $(this).find('strong').html('Uncheck All Checkboxes');
});

$('#uncheckAll').click(function (e) {
    e.preventDefault();
    $('#dataTablePageList :checkbox').removeAttr("checked");
    $(this).removeAttr('id').attr('id','checkAll');
    $(this).find('strong').html('Check All Checkboxes');
});

EDIT:

I tried this however for some reason it doesn’t do anything. Not sure why.

$('#dataTablePageList').delegate('#checkAll', 'click', function(e) {
    e.preventDefault();
    $('#dataTablePageList :checkbox').attr('checked',true);
    $(this).removeAttr('id').attr('id','uncheckAll');
    $(this).find('strong').html('Uncheck All Checkboxes');
});

$('#dataTablePageList').delegate('#uncheckAll', 'click', function(e) {
    e.preventDefault();
    $('#dataTablePageList :checkbox').attr('checked',false);
    $(this).removeAttr('id').attr('id','checkAll');
    $(this).find('strong').html('Check All Checkboxes');
});

Edit 3:

$('#viewAll').live('click', function(e) {
    e.preventDefault();
    oTable.fnLengthChange(-1);
    $(this).removeClass('viewAll').addClass('paginateRecords');
    $(this).find('strong').html('View Paginated Records');
    $('.pagination').hide();
}); 

$('#paginateRecords').live('click', function(e) {
    e.preventDefault();
    oTable.fnLengthChange(10);
    $(this).removeClass('paginateRecords').addClass('viewAll');
    $(this).find('strong').html('View All Records'); 
    $('.pagination').show();          
});

Answer 1

event click is binded to DOM element, not every css-match now-or-in-future, so on the first run, only #checkAll would be binded, and latter would not be used at all

try another way – by using toggle on check element

$('#checkAll').toggle(function (e) {
    e.preventDefault();
    $('#dataTablePageList :checkbox').prop('checked',true);
    $(this).find('strong').html('Uncheck All Checkboxes');
},function (e) {
    e.preventDefault();
    $('#dataTablePageList :checkbox').prop('checked',false);
    $(this).find('strong').html('Check All Checkboxes');
});

as for edit3:

$('#viewAll').toggle(function(e) {
    e.preventDefault();
    oTable.fnLengthChange(-1);
    $(this).find('strong').html('View Paginated Records');
    $('.pagination').hide();
}, function(e) {
    e.preventDefault();
    oTable.fnLengthChange(10);
    $(this).find('strong').html('View All Records'); 
    $('.pagination').show();          
});

toggle() take as parameters two functions which are run alternately after subsequent clicks