Easy Star Rating Control Based On Radio Buttons - Star Rating

An easy-to-use and progressive enhancement star rating system built using jQuery library and radio buttons.

Works with any platform and fallbacks to a group of radio buttons if JavaScript is disabled.

More Features:

• Read only mode.
• Click/Blur/Focus callback functions.
• Supports half-star ratings.
• Supports any number of rating stars.

How to use it:

1. Insert the stylesheet jquery.rating.css and JavaScript jquery.rating.js into your webpage.

<link rel="stylesheet" href="/path/to/jquery.rating.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.rating.js"></script>

2. Create a group of radio buttons with the CSS class of 'star'. That's it.

<input name="star-demo" type="radio" class="star" />
<input name="star-demo" type="radio" class="star" />
<input name="star-demo" type="radio" class="star" />
<input name="star-demo" type="radio" class="star" />
<input name="star-demo" type="radio" class="star" />

3. Or intialize the star rating control via JavaScript.

<input name="star-demo" type="radio" class="star-demo" value="10" />
<input name="star-demo" type="radio" class="star-demo" value="20" />
<input name="star-demo" type="radio" class="star-demo" value="30" />
<input name="star-demo" type="radio" class="star-demo" value="40" />
<input name="star-demo" type="radio" class="star-demo" value="50" />

$('.star-demo').rating({
  // configs here
});

4. Do something when you select a rating value.

$('.star-demo').rating({

  // on click
  callback: function(value, link){
    alert(value);
  },

  // on hover
  hover: function(value, link){
    alert(value);
  },

  // on focus
  focus: function(value, link){
    alert(value);
  }
  
});

5. All default configuration options.

$('.star-demo').rating({
  
  // title attribute of cancel link
  cancel: 'Cancel Rating',

  // value to submit when user click the 'cancel' link
  cancelValue: '',

  // split the star into how many parts?
  split: 0,

  // supports half rating?
  half: false,

  // disables the 'cancel' button
  required: false,

  // read only mode
  readOnly: false

});

6. You're also allowed to pass the options directly in the class attribute as follows:

<input name="star-demo" type="radio" class="star {half:true}" />
<input name="star-demo" type="radio" class="star {half:true}" />
<input name="star-demo" type="radio" class="star {half:true}" />
<input name="star-demo" type="radio" class="star {split:2}" />
<input name="star-demo" type="radio" class="star {split:2}" />

7. API methods.

// set the value
$('.star-demo').rating('select', index/value);

// toggle the read only mode
$('.star-demo').rating('readOnly', true/false);

// enable
$('.star-demo').rating('enable');

// disable
$('.star-demo').rating('disable');

---

This awesome jQuery plugin is developed by fyneworks. For more Advanced Usages, please check the demo page or visit the official website.