How to debug and fix this?
<p>In this JSFiddle</p>

<p><a href="http://jsfiddle.net/littlesandra88/mzPxN/" rel="nofollow">http://jsfiddle.net/littlesandra88/mzPxN/</a></p>

<p>am I trying to use the <a href="http://tablesorter.com/" rel="nofollow">tablesorter plugin</a> to sort the columns.</p>

<p><strong>Problem</strong></p>

<p>Clicking on 'N' sorts the number column just fine.</p>

<p>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.</p>

<p>The trick seams to be to add <code>0</code> and <code>1</code> when the checkbox is clicked using <a href="http://stackoverflow.com/questions/1912957/jquery-tablesorter-sort-by-column-having-input-elements/1913041#1913041">this</a></p>

<pre><code>&lt;td&gt;
    &lt;span class="hidden"&gt;1&lt;/span&gt;
    &lt;input type="checkbox" name="x" value="y"&gt;
&lt;/td&gt;
</code></pre>

<p>and</p>

<pre><code>$(document).ready(function() {

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

})
</code></pre>

<p>and using <a href="http://beckelman.net/post/2008/10/24/Checkbox-Parser-and-Bug-Fix-for-jQuery-TableSorter-Plugin.aspx" rel="nofollow">this</a> as sorting algorithm</p>

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

<p>But I am getting the error <code>not well formed</code>.</p>

<p>Have I implemented it correctly html and JQuery wise?</p>

<p>And if so, how do I debug and fix it?</p>
