CODEWITHSUNDEEP
javascriptjquery
Sandra Schlichting
Sandra Schlichting

Reputation: 25986

How to toggle content of <td>?

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?

Upvotes: 2

Views: 440

Answers (5)

brymck
brymck

Reputation: 7663

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/

Upvotes: 1

dotty
dotty

Reputation: 41433

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

Upvotes: 1

JohnFx
JohnFx

Reputation: 34909

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);

Upvotes: 1

dotty
dotty

Reputation: 41433

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

Upvotes: 1

El Guapo
El Guapo

Reputation: 5781

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

Upvotes: 0

Related Questions