How to debug and fix this?

In this JSFiddle

http://jsfiddle.net/littlesandra88/mzPxN/

am I trying to use the tablesorter plugin to sort the columns.

Problem

Click开发者_Python百科ing on 'N' sorts the number column just fine.

Clicking on 'Signed' also sorts the checkbox column fine, but if you un-check one of the check boxes, they are not sorted correctly any longer.

The trick seams to be to add 0 and 1 when the checkbox is clicked using this

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

and

$(document).ready(function() {

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

})

and using this as sorting algorithm

ts.addParser({
        id: 'input',
        is: function(s) {
            return s.toLowerCase().match(/<input[^>]*checkbox[^>]*/i); ;
        },
        format: function(s) {
            var integer = 0;
            if (s.toLowerCase().match(/<input[^>]*checked*/i)) {
                integer = 1;
            }
            return integer;
        },
        type: "numeric"
    });

But I am getting the error not well formed.

Have I implemented it correctly html and JQuery wise?

And if so, how do I debug and fix it?

you don't need to have a fancy formatter or anything:

see my edit of your fiddle:

http://jsfiddle.net/CgMZ9/

put the span before the checkboxes :)

by default, it will look at whatever text comes first in the field, which is going to be your 0 or 1, and sort on that :)

The hidden span in your case is after so change

$(this).prev().html(order)

to

$(this).next().html(order)

Updated fiddle