How to toggle content of ?

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?

Just to be clear, the jQuery Toggle command toggles the visibility. Not the checked status of a checkbox. — JohnFx, Jun 10 '11 at 14:09
Do you want to toggle the checkbox _and_ the X at that same time? — Jay, Jun 10 '11 at 14:09
So when "save" is pressed you want the x to go if the checkbox is not checked? — dotty, Jun 10 '11 at 14:09
and http://stackoverflow.com/questions/6307120/how-to-change-a-checkbox-attribute-on-click-of-parent-tr/6307165#6307165 which was asked about 20 minutes ago. — dotty, Jun 10 '11 at 14:13

JohnFx · Answer 1 · 2011-06-10T14:18:17.440

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

edited Jun 10 '11 at 14:18

answered Jun 10 '11 at 14:10

JohnFx

34,542
18
104
162

score 1 · Answer 2 · answered Jun 10 '11 at 14:15

1

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

answered Jun 10 '11 at 14:15

dotty

40,405
66
150
195

brymck · Answer 3 · 2011-06-10T14:24:29.443

1

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/

edited Jun 10 '11 at 14:24

answered Jun 10 '11 at 14:16

brymck

7,555
28
31

Very cool. Can the checkbox also toggle? Ie. when X is displayed, the checkbox should be checked. Can that be done? – Sandra Schlichting Jun 10 '11 at 14:18
Yeah, the other people gave good answers on that, so I won't duplicate their work. – brymck Jun 10 '11 at 14:20

score 1 · Accepted Answer · answered Jun 10 '11 at 14:22

1

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

answered Jun 10 '11 at 14:22

dotty

40,405
66
150
195

score 0 · Answer 5 · answered Jun 10 '11 at 14:10

0

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

answered Jun 10 '11 at 14:10

El Guapo

5,581
7
54
82

3

Not everyone is on 1.6, so `attr()` is a better solution at the moment. But in the future we should defiantly use `prop()` – dotty Jun 10 '11 at 14:16
Here are some great answers on [how `prop()` and `attr()` differ](http://stackoverflow.com/questions/5874652/prop-vs-attr). – Town Jun 10 '11 at 14:28

How to toggle content of ?

5 Answers5