Rating Star Widgets – How to Check Stars Dynamically

Question

I'm working on rating stars. My question is how to check stars dynamically for example if we pass a variable with value 4.2 then dynamically 4.2stars four an halfstar has to checked.

How I can achieve this using JQuery? This is my HTML:

Thanks.

$(document).ready(function(){

    var value = 3;
    $("input[name=rating][value=" + value + "]").attr('checked', 'checked');
});

.rating_widgets {
	display: flex;
  margin-top: 25px;
}
.rating { 
  border: none;
  float: left;
}
.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 24px;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}
.rating > .half:before { 
  content: "\f089";
  position: absolute;
}
.rating > label { 
  color: #ddd; 
 float: right; 
}
.rating > input:checked ~ label, 
.rating:not(:checked),
.rating:not(:checked){ color: #FFD700;  }

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




	
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
 
  

  4.2 Stars-Based on 1540 Users Reviews

Patrick Hund · Accepted Answer

So the problem here is that the value of the input fields that you are selecting by the rating value (e.g. 4.4) are fairly irregular (e.g. “4 and a half”). If you really must use these values, I'd first create me an object that maps properly normalized input values to the values of the checkbox input fields, like so:

var starMap = {
    '0.5': 'half',
    '1': '1',
    '1.5': '1 and a half',
    '2': '2',
    '2.5': '2 and a half',
    '3': '3',
    '3.5': '3 and a half',
    '4': '4',
    '4.5': '4 and a half',
    '5': '5'
}

You can then get the value that corresponds to a number by using it as a key to the mapping object, which will give you the target value, like this:

var value = '4.5';
var fieldValue = starMap[value]; // result: '4 and a half'

Note that the number actually needs to be a string, so if your input is a number, like in your example, you have to convert it before using as a key:

var value = 4.5;
var stringValue = Number(value).toString(); // result: '4.5'
var fieldValue = starMap[stringValue]; // result: '4 and a half'

So what if your number is not represented in the mapping object, like 4.4, for example? Well, you'll have to round it first to the next half integer, so you'll wind up with this:

var value = 4.4;
var roundedValue = Math.round(value*2)/2; // result: 4.5
var stringValue = Number(value).toString(); // result: '4.5'
var fieldValue = starMap[stringValue]; // result: '4 and a half'

Putting it all together, a working solution to your problem could look like this:

var starMap = {
    '0.5': 'half',
    '1': '1',
    '1.5': '1 and a half',
    '2': '2',
    '2.5': '2 and a half',
    '3': '3',
    '3.5': '3 and a half',
    '4': '4',
    '4.5': '4 and a half',
    '5': '5'
}

function roundToHalf(value) {
    return Math.round(value * 2) / 2;
}

function convertToString(value) {
    return Number(value).toString();
}

function setStarRating(value) {
    var fieldValue = starMap[convertToString(roundToHalf(value))];
    $("input[name=rating][value='" + fieldValue + "']").attr('checked', 'checked');
}

$(document).ready(function() {
    var value = 4.4;
    setStarRating(value);
});

.rating_widgets {
    display: flex;
    margin-top: 25px;
}

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

.rating > input {
    display: none;
}

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

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

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

.rating > input:checked ~ label,
.rating:not(:checked),
.rating:not(:checked) {
    color: #FFD700;
}

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




    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    


4.4 Stars-Based on 1540 Users Reviews

Some notes:

I've used 4.4 instead of 4.2 like you did to demonstrate that it works for half stars (4.2 rounded would be 4 stars, which will work just as well)
I've refactored the rounding, converting to string, and marking the star each into extra functions to make the code tidier

You can also find this code in this fiddle: https://jsfiddle.net/pahund/0zrooko3/

Rating Star Widgets – How to Check Stars Dynamically

Answers (1)

Related Questions