The Star Rating Plugin is a plugin for the jQuery Javascript library that creates a non-obstrusive star rating control based on a set of radio input boxes.

It turns a collection of radio boxes into a neat star-rating control. It creates the interface based on standard form elements, which means the basic functionality will still be available even if Javascript is disabled.


Create a set of radio buttons and surround them with a div of class jqRating. When you hover over the stars, a tooltip at the right side will display the value of the radio box, or the title if present.

Formfield rating

The jquery rating plugin is used to implement a rating formfield. Here are some examples:

Name Type Size Values Tooltip message Attributes
Rating1 rating 5      
Rating2 rating 10 very low, low, substandard, standard, superior, I like it, quite good, good, very good, excellent    
Rating3 rating 20 0.5, 1.0, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0, 4.5, 5.0, 5.5, 6.0, 6.5, 7.0, 7.5, 8.0, 8.5, 9.0, 9.5, 10   split:2
Rating4 rating+values 10 very low=1, low=2, substandard=3, standard=4, superior=5, I like it=6, quite good=7, good=8, very good=9, excellent=10    

  • Rating1 defines a simple numeric rating
  • Rating2 defines a simple scheme using named categories.
  • Rating3 defines a selection between 0-10 using 0.5 steps
  • Rating4 defines a numeric rating where each value is mapped to a named category

Note, that the Attributes column of a rating field will be used to parametrize the jquery rating plugin.


No such plugin rating

<div class="jqRating">
<input type="radio" name="test" value="1" class="rating" title="very low"/>
<input type="radio" name="test" value="2" class="rating" title="low" />
<input type="radio" name="test" value="3" class="rating" title="substandard" />
<input type="radio" name="test" value="4" class="rating" title="standard" />
<input type="radio" name="test" value="5" class="rating" title="superior" checked="checked" />
<input type="radio" name="test" value="6" class="rating" title="I like it" />
<input type="radio" name="test" value="7" class="rating" title="quite good" />
<input type="radio" name="test" value="8" class="rating" title="good" />
<input type="radio" name="test" value="9" class="rating" title="very good" />
<input type="radio" name="test" value="10" class="rating" title="excelent" />

Topic revision: r1 - 28 Mar 2022, UnknownUser
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback