jQuery Rating Stars

by Abid Shaik

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/jquery.barrating.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/css-stars.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/bars-1to10.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/bars-horizontal.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/bars-movie.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/bars-pill.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/bars-reversed.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/bars-square.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bar-rating/1.2.2/themes/bootstrap-stars.css">
<select id="CSSStars" name="rating" autocomplete="off" class="BarRating">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4" selected="selected">4</option>
  <option value="5">5</option>
</select>
<select id="TenStars" name="rating" autocomplete="off" class="BarRating">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4" selected="selected">4</option>
  <option value="5">5</option>
</select>

<select id="HorizontalStars" name="rating" autocomplete="off" class="BarRating">
  <option value="1" selected="selected">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<select id="MovieStars" name="rating" autocomplete="off" class="BarRating">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3"...

JavaScript

$(document).ready(function(){

/*$('.BarRating').barrating('show', {
            theme: 'css-stars'
        });*/
        
$('#TenStars').barrating('show', {theme: 'bars-1to10'});
$('#HorizontalStars').barrating('show', {theme: 'bars-horizontal'});
$('#MovieStars').barrating('show', {theme: 'bars-movie'});
$('#PillStars').barrating('show', {theme: 'bars-pill'});
$('#ReversedStars').barrating('show', {theme: 'bars-reversed'});
$('#SquareStars').barrating('show', {theme: 'bars-square'});
$('#CSSStars').barrating('show', {theme: 'css-stars'});

//$('#CSSStars').barrating('set', 5); Method to set Rating from jQ

        
});