JSFiddle - React, Tailwind, and code Playground

by spinal007

HTML

<script src="http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.js"></script>
<link rel="stylesheet" href="http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.css">
<input name="star2" type="radio" class="my-star star_1" value="1"/>
<input name="star2" type="radio" class="my-star star_2" value="2"/>
<input name="star2" type="radio" class="my-star star_3" value="3"/>
<input name="star2" type="radio" class="my-star star_4" value="4"/>
<input name="star2" type="radio" class="my-star star_5" value="5"/>

JavaScript

// if you must set the initially selected star via javascript
// make sure you actually have that rating value, wherever it's coming from
var rating = 4;

// then make sure you run this before the rating has been initialised
$('.star_'+rating).prop('checked',true);

// and when you initialise the widget, use the callback event
// to post the data to your server
$('.my-star').rating({
  callback: function(value, link){
    
      //this is where you post the data
      //alert(value);
      
      // you do not need to do anything to redraw te stars,
      // that is the point of the plugin
      
  }
});

// and AFTER the control has been initialized you can use the API
// to change the selected value at any time
$('.my-star:first').rating('select','3');

// but you never ever have to worry about redrawing them (turning stars on or off)