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">
<link href='starrate/jquery.rating.css' type="text/css" rel="stylesheet" />
<form action="#" method="post" class="stdform" id="ratingform">
<input type="radio" class="starrate" name="the_rating" value="1" id="rate1" title="choice 1" />
<input type="radio" class="starrate" name="the_rating" value="2" id="rate2" title="choice 2" />
<input type="radio" class="starrate" name="the_rating" value="3" id="rate3" title="choice 3" checked="checked" />
<input type="radio" class="starrate" name="the_rating" value="4" id="rate4" title="choice 4" />
<input type="radio" class="starrate" name="the_rating" value="5" id="rate5" title="choice 5" />
<span id="choice" style="margin:0 0 0 20px;">choice 0</span>
</form>

JavaScript

$(function () {
                $('#ratingform input:radio[name="the_rating"]').rating({
                        focus: function(value, link){
                                var tip = $('#choice');
                                tip[0].data = tip[0].data || tip.html();
                                tip.html(link.title || 'value: '+value);
                        },
                        blur: function(value, link){
                                if ( !this.checked ) {
                                        var tip = $('#choice');
                                        $('#choice').html(tip[0].data || '');
                                }
                        },
                        callback: function(value, link){
                        }
                });
        });