Star Rating Plugin Control Based On Radio Buttons

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