Post
Ask Question

Display Rating using JavaScript

I have created sample HTML File to display rating using JavaScript, this functionality is commonly used in web development.
 
Using this we can select the rating and submit the value to our database.
 
This File is created using HTML and JavaScript code and it’s simple and easy to understand.
 
 
Star Image
 
HTML Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.   <head>  
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  
  6.     </script>  
  7.     <style>  
  8.       .divRating {  
  9.       float:left;  
  10.       }  
  11.       .divRating span { float:right; position:relative; }  
  12.       .divRating span input {  
  13.       position:absolute;  
  14.       top:0px;  
  15.       left:0px;  
  16.       opacity:0;  
  17.       }  
  18.       .divRating span label {  
  19.       display: block;  
  20.       float: right;  
  21.       width: 16px;  
  22.       height: 16px;  
  23.       background: url('star.png') 0 -16px;  
  24.       }  
  25.       .divRating span:hover ~ span label,  
  26.       .divRating span:hover label,  
  27.       .divRating span.checked label,  
  28.       .divRating span.checked ~ span label {  
  29.       background-position: 0 0;  
  30.       }  
  31.     </style>  
  32.     <script>  
  33.       $(document).ready(function(){  
  34.       // Check Radio-box  
  35.       $(".divRating input:radio").attr("checked", false);  
  36.       $('.divRating input').click(function () {  
  37.       $(".divRating span").removeClass('checked');  
  38.       $(this).parent().addClass('checked');  
  39.       });  
  40.       $('input:radio').change(  
  41.       function(){  
  42.       var userRating = this.value;  
  43.       alert(userRating);  
  44.       });  
  45.       });  
  46.     </script>  
  47.   </head>  
  48.   
  49.   <body>  
  50.     <div class="divRating">  
  51.       <span>  
  52.         <input type="radio" name="rating" id="str5" value="5">  
  53.         <label for="str5"></label>  
  54.       </span>  
  55.       <span>  
  56.         <input type="radio" name="rating" id="str4" value="4">  
  57.         <label for="str4"></label>  
  58.       </span>  
  59.       <span>  
  60.         <input type="radio" name="rating" id="str3" value="3">  
  61.         <label for="str3"></label>  
  62.       </span>  
  63.       <span>  
  64.         <input type="radio" name="rating" id="str2" value="2">  
  65.         <label for="str2"></label>  
  66.       </span>  
  67.       <span>  
  68.         <input type="radio" name="rating" id="str1" value="1">  
  69.         <label for="str1"></label>  
  70.       </span>  
  71.     </div>  
  72.   </body>  
  73.   
  74. </html> 
Next Recommended Reading Get And Set Variable Values From One JavaScript File To Another JavaScript File Using Local Storage