Press "Enter" to skip to content

Star Rating Plugin Control Based On Radio Buttons

Star Rating Radio Buttons, the star rating plugin is a plugin for the jQuery Javascript library that creates a non-intrusive star rating control based on a set of radio input boxes.

More Features

  • Read-only mode.
  • Click/Blur/Focus callback features.
  • Supports half-star scores.
  • Supports any variety of score stars.

How to make use of 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 bunch of radio buttons with the CSS class of ‘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" />
<input name="star-demo" type="radio" class="star" />

3. Or initialize the star score management by way of 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();

4. Do one thing when you select a rating value.

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

  // on click on
  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 choices.

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

6. You’re additionally allowed to move the choices immediately within 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 " />
<input name="star-demo" type="radio" class="star " />

7. API strategies.

// 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');

Star Rating Using Radio Button, Easy Star Rating Control Based On Radio Buttons, Star Rating Plugin/Github


See Demo And Download

Official Website(fyneworks): Click Here

This superior jQuery/javascript plugin is developed by fyneworks. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.