<script type="text/javascript">
$(function () {
    $('.checkall').click(function () {
        $('.chk').attr('checked', this.checked);
    });
});
</script>

The html:

<input type="checkbox" class="checkall"/>
<input type="checkbox" value="1" class="chk"/>
<input type="checkbox" value="2" class="chk"/>
<input type="checkbox" value="3" class="chk"/>
<input type="checkbox" value="4" class="chk"/>

I’ve put together 5 performance tips for the most used JavaScript library, jQuery.

1. Always get elements by #id

This is the fastest selector in jQuery for finding the required element.

Always use it before tag selectors and class selectors. Ordered by speed:

1. $(“#some-id”)
2. $(“div”)
3. $(“#some-id div”)
4. $(“#some-id div.some-class”)
5. $(“div.some-class”)
6. $(“.some-class”)

2. Minimize selection operations

When using a loop, avoid selecting an element or elements in every iteration.

for (var i=0; i<$("#table tr").length; i++){
 ...some code here...
}

Cache the selection like this:

var len = $("#table tr").length;
for (var i=0; i<len; i++){
 ...some code here...
}

3. Insert one instead of many DOM elements

Wrap all your code into one element and insert it in the DOM tree with the .html() method.

Instead of:

var html = '
 <p>One</p>
 <p>Two</p>
 <div>Three</div>
';
$('#someid').html(html);

Wrap the code in a div or other element, and then use the .html() method.

var html = '
<div>
 <p>One</p>
 <p>Two</p>
 <div>Three</div>
</div>
';
$('#someid').html(html);

4. Give your selectors a context

As I said before, the fastest way to select elements is by #id, so, if you must use classes to select elements, give them a context.

Instead of:

$('.someclass').css('background-color' '#FFFFFF');

Use this:

$('.someclass',#someclass-container).css('background-color' '#FFFFFF');

5. Use jQuery chaining capabilities

One of the coolest things in jQuery is the possibility to chain your method calls. Example:

$('#someid').addClass('error').css('color','red').fadeOut('slow');

<table>
    <tr>
<td class='one'>Text</td>
        <td class='two'>Some more text</td>
        <td class='action'><a style='cursor:pointer'>delete</a></td>
   </tr>
   <tr>
        <td class='one'>Text 2</td>
        <td class='two'>Some more text 2</td>
        <td class='action'><a style='cursor:pointer'>delete</a></td>
   </tr>
</table>

And you want to create a click event that deletes a row from a table, and in the same time sends a post or get request to a server that updates the database, deletes the row, you can do this with jQuery like this:

$(document).ready(function(){
    $('.action').click(function(){
       <span style="color: #339966;">//on click, mark the row for deleting by adding a class
       // 'deleting' to the tr element</span>
       $(this).parent().addClass('deleting');

      <span style="color: #339966;"> //make a post to the server, php script for example,
       // that deletes the row from a database</span>
       $.post('deleteRow.php',{
             rowId: 2  <span style="color: #339966;">//send the row id for example</span>
         },function(data){
             <span style="color: #339966;">//when the server is done with the deletion of the row
             // from the database, remove the element from the DOM tree</span>
             $('.deleting').remove();
         })
      })
})

And that’s it. Any comments are welcome.