jQuery star rating

Star ratings are used by users (reviewers) for providing rating (feedback) on things such as films, restaurants, hotels, TV shows, specific services, and specific products with a number of stars.

The below examples show that how we can create star rating programs in jQuery –

Example 1: Simple star rating

In a simple star rating, star symbols are used to provide ratings (reviews) on a specific product. Commonly, the range of a simple star rating lies between 1 star to 5 stars.

Syntax:

We use the below syntax to create a simple star rating program in jQuery –

          $(document).ready(function() {            $(“#st1”).click(function() {                $(“.fa-star”).css(“color”, “black”);                $(“#st1”).css(“color”, “yellow”);              });  

Code:

  <!DOCTYPE html>  <html lang = “en”>  <head>      <meta charset = “UTF-8”>      <meta name = “viewport” content=”width=device-width, initial-scale=1.0″>      <link rel = “stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css”>      <script src = “https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js”> </script>      <script src = “https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js”> </script>      <link rel = “stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>      <script src = “https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>      <title> jQuery simple star rating example </title>      <style>      body {          background-color: aquamarine;          margin : 0px;      }      .fa-star {          font-size : 50px;          align-content: center;      }      .container {          height: 100px;          width: 600px;          margin: auto;      }      </style>  </head>  <body>      <div class = “container”>          <h2 style=”margin-top: 50px;”>jQuery simple star rating example</h2>         <div class = “con”>          <h3 style = “margin-top : 80px; color: green;”>Rate our product :-</h3>          <i class = “fa fa-star” aria-hidden = “true” id = “st1”></i>         <i class = “fa fa-star” aria-hidden = “true” id = “st2”></i>         <i class = “fa fa-star” aria-hidden = “true” id = “st3”></i>         <i class = “fa fa-star” aria-hidden = “true” id = “st4”></i>         <i class = “fa fa-star” aria-hidden = “true” id = “st5”></i>         </div>      </div>      <script>          $(document).ready(function() {            $(“#st1”).click(function() {                $(“.fa-star”).css(“color”, “black”);                $(“#st1”).css(“color”, “yellow”);              });            $(“#st2”).click(function() {                $(“.fa-star”).css(“color”, “black”);                $(“#st1, #st2”).css(“color”, “yellow”);              });            $(“#st3”).click(function() {                $(“.fa-star”).css(“color”, “black”)                $(“#st1, #st2, #st3”).css(“color”, “yellow”);              });            $(“#st4”).click(function() {                $(“.fa-star”).css(“color”, “black”);                $(“#st1, #st2, #st3, #st4”).css(“color”, “yellow”);              });            $(“#st5”).click(function() {                $(“.fa-star”).css(“color”, “black”);                $(“#st1, #st2, #st3, #st4, #st5”).css(“color”, “yellow”);              });          });      </script>  </body>  </html>  

Test it Now

Output:

Example 2: Star rating with hover

Star rating with hover allows users to provide ratings on a particular product without clicking on the star icon. Hover the mouse pointer over the star icons, and it automatically selects the star.

The below script is used to create a star rating with hover in jQuery –

  $(document).ready(function() {            $(“#st1”).hover(function() {                $(“.fa-star”).css(“color”, “black”);                $(“#st1”).css(“color”, “yellow”);              });  

Code:

  <!DOCTYPE html>  <html lang = “en”>  <head>      <meta charset = “UTF-8”>      <meta name = “viewport” content = “width=device-width, initial-scale=1.0”>      <!– Bootstrap and jQuery CDN –>      <link rel = “stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css”>      <script src = “https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js”> </script>      <script src = “https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js”> </script>      <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>      <script src = “https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>      <title> jQuery simple star rating example </title>      <style>      body {          background-color: aquamarine;          margin : 0px;      }      .fa-star {          font-size : 50px;          align-content : center;      }      .container {          height : 100px;          width : 600px;          margin : auto;      }      </style>  </head>  <body>      <div class = “container”>          <h2 style = “margin-top: 50px;”> jQuery star rating with hover </h2>         <div class = “con”>          <h3 style = “margin-top : 80px; color: green;”>Please provide rating on our product :-</h3>          <!– fa fa-star is used to create star icon –>          <i class = “fa fa-star” aria-hidden = “true” id = “st1”></i>         <i class = “fa fa-star” aria-hidden = “true” id = “st2”></i>         <i class = “fa fa-star” aria-hidden = “true” id = “st3”></i>         <i class = “fa fa-star” aria-hidden = “true” id = “st4”></i>         <i class = “fa fa-star” aria-hidden = “true” id = “st5”></i>         </div>      </div>      <!– jQuery star rating with hover script –>      <script>          $(document).ready(function() {            $(“#st1”).hover(function() {                $(“.fa-star”).css(“color”, “black”);                $(“#st1”).css(“color”, “yellow”);              });            $(“#st2”).hover(function() {                $(“.fa-star”).css(“color”, “black”);                $(“#st1, #st2”).css(“color”, “yellow”);              });            $(“#st3”).hover(function() {                $(“.fa-star”).css(“color”, “black”)                $(“#st1, #st2, #st3”).css(“color”, “yellow”);              });            $(“#st4”).hover(function() {                $(“.fa-star”).css(“color”, “black”);                $(“#st1, #st2, #st3, #st4”).css(“color”, “yellow”);              });            $(“#st5”).hover(function() {                $(“.fa-star”).css(“color”, “black”);                $(“#st1, #st2, #st3, #st4, #st5”).css(“color”, “yellow”);              });          });      </script>  </body>  </html>  

Test it Now

Next TopicjQuery :enabled selector

jQuery star rating

jQuery star rating

Example 1: Simple star rating

Syntax:

Example 2: Star rating with hover

Method in Java

Delete Multiple Records using Checkbox in Laravel

You may also like