"Select all" issue when using the tablesorter

Question

I have a search screen where it displays the data. If I get 200 rows. selectAll selects all the checkboxes for all the rows.

My problem is when user filter the rows by selecting filter options rows will reduce to 70 or so based on the filter at that time my selectAll still selects all 200 rows. I want to select only the filtered rows. We are using jQuery for filtering the code for this is below. If possible pure JavaScript solution would be best (as I don't know much about jQuery). jQuery is last preference but OK. I would just be happy to get the page working.

Here is my code :

<script src="js/jquery-1.4.4.min.js" type="text/javascript" />
<script src="js/jquery.tablesorter.js"></script>
<script src="js/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>


<h:commandButton  type="button" id="selectAll" value="Select All"   onclick="selectAllCheckboxes()">

selectAllCheckboxes() 

Code below :

var checkboxes = table.getElementsByTagName('INPUT');
for (var i = 0; i < checkboxes.length; i++) {
                     if (checkboxes[i].type == 'checkbox' && checkboxes[i].disabled ==false) {
             checkboxes[i].checked = true;
         }
    }

Answer 1

Assuming your checkboxes are children of the tr that are filtered you can do this (untested but should work):

selectAllCheckboxes(){
    $('tr:not(.filtered) input[type=checkbox]').attr('checked', 'checked');
}

if you're going to use jQuery you might as well use it for everything. It drives me crazy to see people using jQuery and still typing out "document.getElementById('id')" when $('#id') does the same thing. Also using jQuery to select the array of elements you can set attributes on all the elements in the array without doing the for loop.