Sample markup:

All examples here contains the markup provided below. The wrapper is used as a scope in Stars() constructor to extract all the radio buttons (select options) and remain it's name and value as a hidden input. Note that all other elements from the wrapper will stay intact.

<form>
	Rating: <span id="stars-cap"></span>
	<div id="stars-wrapper1">
		<input type="radio" name="newrate" value="1" title="Very poor" />
		<input type="radio" name="newrate" value="2" title="Poor" />
		<input type="radio" name="newrate" value="3" title="Not that bad" />
		<input type="radio" name="newrate" value="4" title="Fair" />
		<input type="radio" name="newrate" value="5" title="Average" checked="checked" />
		<input type="radio" name="newrate" value="6" title="Almost good" />
		<input type="radio" name="newrate" value="7" title="Good" />
		<input type="radio" name="newrate" value="8" title="Very good" />
		<input type="radio" name="newrate" value="9" title="Excellent" />
		<input type="radio" name="newrate" value="10" title="Perfect" />
	</div>
</form>

- or -

<form>
	Rating: <span id="stars-cap"></span>
	<div id="stars-wrapper2">
		<select name="selrate">
			<option value="1">Very poor</option>
			<option value="2">Not that bad</option>
			<option value="3">Average</option>
			<option value="4" selected="selected">Good</option>
			<option value="5">Perfect</option>
		</select>
	</div>
</form>

Usage:

Turning RADIO buttons into star rating type:

Turning SELECT box into star rating type:

$("#stars-wrapper2").stars({
	inputType: "select"
});

Disabe Stars. Note, it's also possible to pass disabled="disabled" parameter through HTML code instead!

Adding an "onHover" caption element:

Split Stars:

Only one vote, please!

Select the Stars by ID or Value. Note, to remove selection use "-1" for ID or "cancelValue" for Value