Getting ButtonSet to reflect current DOM state

Getting ButtonSet to reflect current DOM state

I've got a 3 button (radio) buttonset which is essentially the main navigation of an iPhone app. When navigating using the buttonset, the buttons correctly show and hide their selected state, however, other links in the app can change the "page" in the app and thus require the buttonset to change to reflect the current state.

Per the jQuery UI docs, it seemed that the way to do what I want is to manipulate the DOM as needs be, ie check and uncheck the radio buttons in question and then call the "refresh" method on the button group, which I'm doing like this:

       document.getElementById('radio2').checked=true;
document.getElementById('radio3').checked=false;
$('#radio').buttonset('refresh');

Given this html:

<div id="radio">
      <input type="radio" id="radio1" name="radio"/><label for="radio1">Gigs</label>
      <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Mixes</label>
      <input type="radio" id="radio3" name="radio"/><label for="radio3">About</label>
</div>

This correctly hilites radio2 but doesn't un-hilite radio3. 

Suggestions?

Thanks!  ethan

(BTWs, the div "radio" is converted to a buttonset elsewhere in the main code.)