How to toggle content of <td>?

Question

I would very much like to be able to toggle having an x and not having an x in

<td class="checkbox"> <input name="signed" type="checkbox" checked /> x </td>

See JSFiddle for example

http://jsfiddle.net/littlesandra88/GMSCW/

The code that is triggered when Submit is pressed is

$('form').live('submit', function(){
   $.post($(this).attr('action'), $(this).serialize(), function(response){
         // do something here on success
   },'json');
   return false;
});

I assume I have to something in the lines of

$(this).getElementByClass("checkbox").td.toggle('x');

But checked should still be updated in the <input name="signed" type="checkbox" checked />

Does anyone know how to do this?

Answer 1

Wrap the X in a span and then hide that

<td class="checkbox"> 
      <input name="signed" type="checkbox" checked />
      <span id='toggleme'>x</span>
 </td>

 //change the visibility of the x
 $('#toggleme').toggle();

// check the checkbox
$('input[name=signed]').attr('checked', true);

Answer 2

To check a checkbox in jQuery use you ELEMENT.attr("checked","checked") or the jQuery 1.6 way with ELEMENT.prop("checked", true)

Answer 3

The best idea, IMO, is to put a <label> right next to the checkbox and then toggle it with $("input[type=checkbox] + label", this).toggle() .

To change the checkbox, the examples other users gave work just fine.

http://jsfiddle.net/w5nAr/

This assumes you don't want to change the checkbox, just the text next to it. If you want both, here's another example:

http://jsfiddle.net/w5nAr/4/

Answer 4

Try looking at the code here it's based off the work by Bryan.

Answer 5

$({some identifier for your checkbox}).attr("checked",true)