Changing the label of a JQuery Mobile checkbox

Question

I have the following checkbox:

<input type="checkbox" id="ui-5"/><label for="ui-5">checked</label>

I'd like to change its value to unchecked if its not checked and checked if it is checked. I've tried this code:

$("#ui-5").click(function(){
   $("label[for='ui-5']").text("unchecked");
});

It changes the label but the design of my checkbox becomes weird. How can I fix this?

Answer 1

JQuery mobile changes the original html of the page, this seems to work:

 $("#ui-5").change(function () {
    $("label[for='ui-5'] span.ui-btn-text").text("unchecked");
 });