I am trying to use Jquery UI button plugin for my radio button group. The UI looks cool but the problem is when I change the underlying radio button's checked property the UI does not change. for ex. If I have 3 radio buttons say radio1, radio2, radio3 and if I make radio1 to be selected then the button does not change but when I refresh it is displaying correctly.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/start/jquery-ui.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript">
$(function() {
$("#radio").buttonset();
$("#mybutton").button();
$("#mybutton").click(function(){$("#radio1").attr("checked","checked");alert($("#radio1").attr("checked"));//returns true});
});
</script>
<style>
#format { margin-top: 2em; }
</style>
</head>
<body>
<div class="demo">
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
<br/>
<input type="button" id="mybutton" value="click me"/>
</form>
</div><!-- End demo -->
</body>
</html>
Any help is much appreciated.
Thanks in advance,
Raja