Autoselection of checkboxes in a table

The code doing selection

$(function () {
    "use strict";
    var toggleSelect = $("#all"),
        checkboxes = $("#table").find("tbody input[type=checkbox]");
    toggleSelect.click(function () {
        checkboxes.attr('checked', $(this).is(":checked"));
    });
    checkboxes.click(function () {
        toggleSelect.attr('checked', checkboxes.length === checkboxes.filter(':checked').length);
    });
});

A sample table

         
         
Username
         
Phone Number
     
     

         
         
User 1
         
0123456789
     
         
         
User 2
         
0133456789
     
 

Add jQuery to any website

Sometimes I need to perform some manipulations with a webiste's data. For this purpose I like to use jQuery but not every website it has. So I need to add this support. For that I made a bookmarklet. To use it just drag jQuery to your bookmar bar.

Checkbox select all jQuery plugin for a table

/*
 * File: jquery.checkboxselection.js
 *
 * Plugin to create checkbox in the table
 * It needs table has correct structure (at least with head and body) and
 * there are checkboxs in row's first cell both in header in body
 */

(function($) {
    $.fn.checkboxSelection = function() {
        return this.each(function() {
            var table = this;
            var headCheckbox = $('thead th:first :checkbox', table).click(function() {
                $('tbody tr', table).find('td:first :checkbox').attr('checked', this.checked);
            })
            var checkSelection = function() {
                var trs = $('tbody tr', table).find('td:first');
                headCheckbox.attr('checked', trs.find('input:checked').length == trs.find(':checkbox').length);
            }
            $('tbody tr', this).find('td:first :checkbox').click(checkSelection);
            checkSelection();
        });
    }
})(jQuery);

HTML:

<table>
    <thead>
        <tr>
            <th><input type="checkbox"></th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="a[1]"></td>
            <td>John Smith</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="a[2]"></td>
            <td>Jack Daniels</td>
        </tr>
    </tbody>
</table>

Using:

$('table').checkboxSelection();