University of Natural Resources and Life Sciences (BOKU)
Institute of Computational Biology


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 SizeSorted ascending 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    
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    
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

  • 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" />

05 Jul 2022 - 05:30 Foswiki v2.0.2