How can I sort columns having input elements?

Add a hidden span just before the input, and include in it some text (that will be used to sort the column). Something like:

<td>
    <span class="hidden">1</span>
    <input type="checkbox" name="x" value="y">
</td>

If needed, you can attach an event to the checkbox so that it modifies the content of the previous sibling (the span) when checked/unchecked:

$(document).ready(function() {

    $('#tableid input').click(function() {
         var order = this.checked ? '1' : '0';
         $(this).prev().html(order);
    })

})

Note: I haven't checked the code, so it might have errors.


This is the more complete/correct version of Haart's answer.

$(document).ready(function() {
    $.tablesorter.addParser({ 
        id: "input", 
        is: function(s) { 
            return false; 
        }, 
        format: function(s, t, node) {
            return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0;
        }, 
        type: "numeric" 
    });

    sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}});
// The next makes it respond to changes in checkbox values 
    sorter.bind("sortStart", function(sorter){$("#table").trigger("update");});

}); 

I'm adding this response because I'm using a supported/forked jQuery TableSorter library with new features. An optional parser library for input/select fields is included.

http://mottie.github.io/tablesorter/docs/

Here's an example: http://mottie.github.io/tablesorter/docs/example-widget-grouping.html and it's done by including the input/select parser library "parser-input-select.js", adding a headers object and declaring the columns and parsing type.

headers: {
  0: { sorter: 'checkbox' },
  3: { sorter: 'select' },
  6: { sorter: 'inputs' }
}

Additional parsers included are: date parsing (w/Sugar & DateJS), ISO8601 dates, months, 2 digit years, weekdays, distance (feet/inches & metric) and title format (removes "A" & "The").