Search code examples
jqueryhtmlcssasp.net-mvc-5

Add multiple star rating in the same page

I,m trying to add a star rating functionality to my page in mvc , but when i tried to loop over them in the view i got the problem which is all of stars are attached to the first on which mean when i change the second one the first one changes , i got the code from internet can any one help 

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
 border: none;
 float: left;
  }

.rating > input { display: none; } 
.rating > label:before { 
 margin: 5px;
 font-size: 1.25em;
 font-family: FontAwesome;
 display: inline-block;
 content: "\f005";
  }

 .rating > .half:before { 
  content: "\f089";
  position: absolute;
   }

   .rating > label { 
    color: #ddd; 
    float: right; 
     }

     /***** CSS Magic to Highlight Stars on Hover *****/

    .rating > input:checked ~ label, /* show gold star when clicked */
     .rating:not(:checked) > label:hover, /* hover current star */
      .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } 
       /*        hover previous stars in list */

       .rating > input:checked + label:hover,
       .rating > input:checked ~ label:hover,
       .rating > label:hover ~ input:checked ~ label, 
       .rating > input:checked ~ label:hover ~ label { color: #FFED85;  }

HTML : 

  <h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
Solution

  • There are 2 problems, when you try to insert this same code multiple times:

    • in HTML there should be only 1 element with a particular ID
    • input radio elements group together by NAME attribute, meaning if all your input have the same name (eg. rating), then all your radio inputs are changing the value for that variable

    This is how you fix this:

    1. You should add a unique identifier to the ID of each separate fieldset block
    2. You should use separate name attribute in each fieldset block

    See the example here: https://jsfiddle.net/uf3opady/5/

    The code (please note that I used the _1 and _2 suffix for the ID, FOR and NAME attributes in the code:

    <h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
    <input type="radio" id="star5_1" name="rating_1" value="5" /><label class = "full" for="star5_1" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4half_1" name="rating_1" value="4 and a half" /><label class="half" for="star4half_1" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4_1" name="rating_1" value="4" /><label class = "full" for="star4_1" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3half_1" name="rating_1" value="3 and a half" /><label class="half" for="star3half_1" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3_1" name="rating_1" value="3" /><label class = "full" for="star3_1" title="Meh - 3 stars"></label>
    <input type="radio" id="star2half_1" name="rating_1" value="2 and a half" /><label class="half" for="star2half_1" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2_1" name="rating_1" value="2" /><label class = "full" for="star2_1" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1half_1" name="rating_1" value="1 and a half" /><label class="half" for="star1half_1" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1_1" name="rating_1" value="1" /><label class = "full" for="star1_1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalf_1" name="rating_1" value="half" /><label class="half" for="starhalf_1" title="Sucks big time - 0.5 stars"></label>
</fieldset>

<br><br><br>

<h1>2nd Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
    <input type="radio" id="star5_2" name="rating_2" value="5" /><label class = "full" for="star5_2" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4half_2" name="rating_2" value="4 and a half" /><label class="half" for="star4half_2" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4_2" name="rating_2" value="4" /><label class = "full" for="star4_2" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3half_2" name="rating_2" value="3 and a half" /><label class="half" for="star3half_2" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3_2" name="rating_2" value="3" /><label class = "full" for="star3_2" title="Meh - 3 stars"></label>
    <input type="radio" id="star2half_2" name="rating_2" value="2 and a half" /><label class="half" for="star2half_2" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2_2" name="rating_2" value="2" /><label class = "full" for="star2_2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1half_2" name="rating_2" value="1 and a half" /><label class="half" for="star1half_2" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1_2" name="rating_2" value="1" /><label class = "full" for="star1_2" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalf_2" name="rating_2" value="half" /><label class="half" for="starhalf_2" title="Sucks big time - 0.5 stars"></label>
</fieldset>