Updating visual cue of checkbox state via code in jQuery

Question

I have the following HTML on my page:

 <input id="chkIncludeCA3" type="checkbox" /><label for="chkIncludeCA3">Category 3:</label>

And on my code page, the following piece of script:

$('#chkIncludeCA3').prop('checked', true);

Can someone explain to me how I would also update the visual state of the label to show that the checkbox is indeed checked?

EDIT

Thanks to Christophe Roussy for the correct pointer, have discovered the following works perfect:

$('#chkIncludeCA3').prop('checked', true); $("label[for='chkIncludeCA3']").addClass('ui-state-active');

If anyone knows if there is a more official way, I'd appreciate it.

score 1 · Answer 1 · answered Feb 20 '13 at 13:04

1

You mean something like this to get the label ?!

$("label[for='chkIncludeCA3']")

answered Feb 20 '13 at 13:04

Christophe Roussy

Well yes, I guess that works, but I need to change visual state to reflect that fact that the underlying checkbox is checked. I can't seem to see what style is used to determine this. – JasonMHirst Feb 20 '13 at 13:16
What do you mean by visual state ? CSS ? – Christophe Roussy Feb 20 '13 at 13:22
Yes, sorry, the CSS style which toggles to show the state of the checkbox. – JasonMHirst Feb 20 '13 at 13:24
Well then you have a CSS problem, maybe this will help: http://stackoverflow.com/questions/1125226/styling-checkboxes-radio-buttons-and-dropdowns – Christophe Roussy Feb 20 '13 at 13:27
Well I'm using the standard jqueryUI, no 3rd party so just want to toggle the inbuilt style, BUT, thanks to your help, I've managed to find a solution. My thanks. – JasonMHirst Feb 20 '13 at 13:35

1 Answers1