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 <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<style>
.divRating {
float:left;
}
.divRating span { float:right; position:relative; }
.divRating span input {
position:absolute;
top:0px;
left:0px;
opacity:0;
}
.divRating span label {
display: block;
float: right;
width: 16px;
height: 16px;
background: url('star.png') 0 -16px;
}
.divRating span:hover ~ span label,
.divRating span:hover label,
.divRating span.checked label,
.divRating span.checked ~ span label {
background-position: 0 0;
}
</style>
<script>
$(document).ready(function(){
// Check Radio-box
$(".divRating input:radio").attr("checked", false);
$('.divRating input').click(function () {
$(".divRating span").removeClass('checked');
$(this).parent().addClass('checked');
});
$('input:radio').change(
function(){
var userRating = this.value;
alert(userRating);
});
});
</script>
</head>
<body>
<div class="divRating">
<span>
<input type="radio" name="rating" id="str5" value="5">
<label for="str5"></label>
</span>
<span>
<input type="radio" name="rating" id="str4" value="4">
<label for="str4"></label>
</span>
<span>
<input type="radio" name="rating" id="str3" value="3">
<label for="str3"></label>
</span>
<span>
<input type="radio" name="rating" id="str2" value="2">
<label for="str2"></label>
</span>
<span>
<input type="radio" name="rating" id="str1" value="1">
<label for="str1"></label>
</span>
</div>
</body>
</html>