I am trying to make sure that when the page is loaded, the rating is automatically filled with 4.5. There must be four and a half stars active (yellow) with jQuery.
My code:
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
fieldset, label { margin: 0; padding: 0; }
/****** 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, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; } <fieldset class="rating">
<input type="radio" id="star5" name="star" value="5" classe="fa"><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="star" value="4.5" classe="fa"><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="star" value="4" classe="fa"><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="star" value="3.5" classe="fa"><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="star" value="3" classe="fa"><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="star" value="2.5" classe="fa"><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="star" value="2" classe="fa"><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="star" value="1.5" classe="fa"><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="star" value="1" classe="fa"><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="star" value="0.5" classe="fa"><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>What can I do in jQuery to give 4.5 stars to this?
Advertisement
Answer
The easiest method is to set the value directly in the HTML:
<input type="radio" id="star4half" checked name="star" value="4.5"
using the checked attribute.
If you need to use jquery, your radio (in the code provided in the question) has an id so you can select it using the id and use .prop, wrap in a doc ready to be safe:
$(() => {
$("#star4half").prop("checked", true)
});
If you don’t have an id, eg if you have multiple ratings on your page, then you can identify them using the value, eg:
$(".rating > [value='4.5']").prop("checked", true)
(make sure the 4.5 is in quotes otherwise it gets an error)
Updated snippet with id:
$(() => {
$("#star4half").prop("checked", true)
});@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
fieldset,
label {
margin: 0;
padding: 0;
}
/****** 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,
/* hover current star when changing rating */
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
/* lighten current selection */
.rating>input:checked~label:hover~label {
color: #FFED85;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <fieldset class="rating"> <input type="radio" id="star5" name="star" value="5" classe="fa"><label class="full" for="star5" title="Awesome - 5 stars"></label> <input type="radio" id="star4half" name="star" value="4.5" classe="fa"><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label> <input type="radio" id="star4" name="star" value="4" classe="fa"><label class="full" for="star4" title="Pretty good - 4 stars"></label> <input type="radio" id="star3half" name="star" value="3.5" classe="fa"><label class="half" for="star3half" title="Meh - 3.5 stars"></label> <input type="radio" id="star3" name="star" value="3" classe="fa"><label class="full" for="star3" title="Meh - 3 stars"></label> <input type="radio" id="star2half" name="star" value="2.5" classe="fa"><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label> <input type="radio" id="star2" name="star" value="2" classe="fa"><label class="full" for="star2" title="Kinda bad - 2 stars"></label> <input type="radio" id="star1half" name="star" value="1.5" classe="fa"><label class="half" for="star1half" title="Meh - 1.5 stars"></label> <input type="radio" id="star1" name="star" value="1" classe="fa"><label class="full" for="star1" title="Sucks big time - 1 star"></label> <input type="radio" id="starhalf" name="star" value="0.5" classe="fa"><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label> </fieldset>
Snippet without id
$(() => {
$(".rating [value='4.5']").prop("checked", true)
});@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
fieldset,
label {
margin: 0;
padding: 0;
}
/****** 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,
/* hover current star when changing rating */
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
/* lighten current selection */
.rating>input:checked~label:hover~label {
color: #FFED85;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <fieldset class="rating"> <input type="radio" name="star" value="5" classe="fa"><label class="full" for="star5" title="Awesome - 5 stars"></label> <input type="radio" name="star" value="4.5" classe="fa"><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label> <input type="radio" name="star" value="4" classe="fa"><label class="full" for="star4" title="Pretty good - 4 stars"></label> <input type="radio" name="star" value="3.5" classe="fa"><label class="half" for="star3half" title="Meh - 3.5 stars"></label> <input type="radio" name="star" value="3" classe="fa"><label class="full" for="star3" title="Meh - 3 stars"></label> <input type="radio" name="star" value="2.5" classe="fa"><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label> <input type="radio" name="star" value="2" classe="fa"><label class="full" for="star2" title="Kinda bad - 2 stars"></label> <input type="radio" name="star" value="1.5" classe="fa"><label class="half" for="star1half" title="Meh - 1.5 stars"></label> <input type="radio" name="star" value="1" classe="fa"><label class="full" for="star1" title="Sucks big time - 1 star"></label> <input type="radio" name="star" value="0.5" classe="fa"><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label> </fieldset>