Today I am going to share you how to make star rating using jQuery. I was working in a B2B website like eBay where I need to make rating of buyer and seller on real time.  Here I am trying to share what I did and accomplish this rating system.

The Star Rating Plugin is a plugin for the jQuery JavaScript library that creates a star rating control based on a set of radio input boxes.

How to use it??

Step 1: First you need to download jquery library and jquery.rating.pack.js library

Step 2: Second step is to download jquery.rating.css style sheet.

Step 4: Now just add the class star to your radio boxes and assign value as required

Step 5: On checking the stars a call back function is called which display the your rating result.

Here I am sharing code example to build complete rating system using jQuery

Sample Code:

<!--css for rating-->

<link href="http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.css " rel="stylesheet" type="text/css">

 

<!--jquery library-->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js "></script>

<!--jquery rating library-->

<script type="text/javascript" src="http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.pack.js"></script>

 

<script type="text/javascript" language="javascript">

$(function(){

$('#btnRating').click(function(){

$('#form1 :radio.star').rating();

$('#form1').submit(function(){

$('input',this).each(function(){

if(this.checked)

{

alert("you have rated "+this.value+" stars");

}

});

});

});

});

</script>

 

<h1>Jquery Star rating example</h1>

<form id="form1" method="post" action="">

<input class="star" type="radio" name="rating" value="1"/>

<input class="star" type="radio" name="rating" value="2"/>

<input class="star" type="radio" name="rating" value="3"/>

<input class="star" type="radio" name="rating" value="4"/>

<input class="star" type="radio" name="rating" value="5"/>

<button type="submit" id="btnRating">Rate</button>

</form>

 

Once you implement this steps and code you can have a beautiful star rating.