jQuery UI buttonset() Not Responding As It Should?

Question

I'm a newbie to the jQuery UI plugin and I'm building a demo application to test my knowledge. I'm using the radio button add-on and I can't seem to get it working. I have the following line in a function called when the body loads:

$("#buttonSetDiv").buttonset();

I'm also including the CSS and JS correctly, like so:

<style src="jquery-ui-1.8.4.custom/css/ui-darkness/jquery-ui-1.8.4.custom.css"></style>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.4.custom/js/jquery-ui-1.8.4.custom.min.js"></script>

... and the actual HTML looks like this:

<form name="radios" id="myForm">
<div id="buttonSetDiv">
<input type="radio" name="group1" value="posts" id="radio1" checked onchange="valueChanged()"> <label for="radio1">Posts</label>
<input type="radio" name="group1" value="members" onchange="valueChanged()" id="radio2">
<label for="radio2">Members</label>
</div>
</form> 

... but for some reason, with this seemingly correct implementation, I'm still getting normal-looking radio buttons. I'd like to achieve this effect:

Does anyone have an answer here? Thanks a ton in advance. :)

Answer 1

Your <input> is missing a closing quote on the id="radio2", so this:

<input type="radio" name="group1" value="members" onchange="valueChanged()" id="radio2>

Should be:

<input type="radio" name="group1" value="members" onchange="valueChanged()" id="radio2">

This is throwing off at least Chrome in recognizing it correctly, you can try the fixed version here.