Почему не срабатывает radio checked для вывода звезд
Сами звезды отображаются корректно
номер checked при выборе кнопки отправляет в базу данных корректно, но при этом не срабатывает checked для звезд
функции наведения так же работают корректно
В html при выборе нужного radio в инспекторе не вижу присвоения checked (скорее всего из-за этого не работает)
<li>
<label class="otziv_label">Оценка товара:</label>
<span class="otziv_star">*</span>
<div class="content__otziv_time-i">
<label for="star_js1"><i class="fa fa-star-o" id="star_i1" aria-hidden="true"></i></label>
<input type="radio" name="otziv_star_blok" id="star_js1">
<label for="star_js2"><i class="fa fa-star-o" id="star_i2" aria-hidden="true"></i></label>
<input type="radio" name="otziv_star_blok" id="star_js2">
<label for="star_js3"><i class="fa fa-star-o" id="star_i3" aria-hidden="true"></i></label>
<input type="radio" name="otziv_star_blok" id="star_js3">
<label for="star_js4"><i class="fa fa-star-o" id="star_i4" aria-hidden="true"></i></label>
<input type="radio" name="otziv_star_blok" id="star_js4">
<label for="star_js5"><i class="fa fa-star-o" id="star_i5" aria-hidden="true"></i></label>
<input type="radio" name="otziv_star_blok" id="star_js5">
</div>
</li>
var star_label1 = $("label[for='star_js1']"),
star_label2 = $("label[for='star_js2']"),
star_label3 = $("label[for='star_js3']"),
star_label4 = $("label[for='star_js4']"),
star_label5 = $("label[for='star_js5']"),
star_i1 = $("#star_i1"), star_i2 = $("#star_i2"), star_i3 = $("#star_i3"), star_i4 = $("#star_i4"), star_i5 = $("#star_i5");
function hoverStar1(){
star_label1.hover(function(){
star_i1.removeClass('fa-star-o').addClass('fa-star');
}, function(){
star_i1.removeClass('fa-star').addClass('fa-star-o');
});
}
function hoverStar2(){
star_label2.hover(function(){
star_i1.removeClass('fa-star-o').addClass('fa-star');
star_i2.removeClass('fa-star-o').addClass('fa-star');
}, function(){
star_i1.removeClass('fa-star').addClass('fa-star-o');
star_i2.removeClass('fa-star').addClass('fa-star-o');
});
}
function hoverStar3(){
star_label3.hover(function(){
star_i1.removeClass('fa-star-o').addClass('fa-star');
star_i2.removeClass('fa-star-o').addClass('fa-star');
star_i3.removeClass('fa-star-o').addClass('fa-star');
}, function(){
star_i1.removeClass('fa-star').addClass('fa-star-o');
star_i2.removeClass('fa-star').addClass('fa-star-o');
star_i3.removeClass('fa-star').addClass('fa-star-o');
});
}
function hoverStar4(){
star_label4.hover(function(){
star_i1.removeClass('fa-star-o').addClass('fa-star');
star_i2.removeClass('fa-star-o').addClass('fa-star');
star_i3.removeClass('fa-star-o').addClass('fa-star');
star_i4.removeClass('fa-star-o').addClass('fa-star');
}, function(){
star_i1.removeClass('fa-star').addClass('fa-star-o');
star_i2.removeClass('fa-star').addClass('fa-star-o');
star_i3.removeClass('fa-star').addClass('fa-star-o');
star_i4.removeClass('fa-star').addClass('fa-star-o');
});
}
function hoverStar5(){
star_label5.hover(function(){
star_i1.removeClass('fa-star-o').addClass('fa-star');
star_i2.removeClass('fa-star-o').addClass('fa-star');
star_i3.removeClass('fa-star-o').addClass('fa-star');
star_i4.removeClass('fa-star-o').addClass('fa-star');
star_i5.removeClass('fa-star-o').addClass('fa-star');
}, function(){
star_i1.removeClass('fa-star').addClass('fa-star-o');
star_i2.removeClass('fa-star').addClass('fa-star-o');
star_i3.removeClass('fa-star').addClass('fa-star-o');
star_i4.removeClass('fa-star').addClass('fa-star-o');
star_i5.removeClass('fa-star').addClass('fa-star-o');
});
}
if ($("#star_js1").prop('checked')) {
star_i1.removeClass('fa-star-o').addClass('fa-star');
hoverStar2(); hoverStar3(); hoverStar4(); hoverStar5();
}
else if ($("#star_js2").prop('checked')) {
star_i1.removeClass('fa-star-o').addClass('fa-star');
star_i2.removeClass('fa-star-o').addClass('fa-star');
hoverStar3(); hoverStar4(); hoverStar5();
}
else if ($("#star_js3").prop('checked')) {
star_i1.removeClass('fa-star-o').addClass('fa-star');
star_i2.removeClass('fa-star-o').addClass('fa-star');
star_i3.removeClass('fa-star-o').addClass('fa-star');
hoverStar4(); hoverStar5();
}
else if ($("#star_js4").prop('checked')) {
star_i1.removeClass('fa-star-o').addClass('fa-star');
star_i2.removeClass('fa-star-o').addClass('fa-star');
star_i3.removeClass('fa-star-o').addClass('fa-star');
star_i4.removeClass('fa-star-o').addClass('fa-star');
hoverStar5();
}
else if ($("#star_js5").prop('checked')) {
star_i1.removeClass('fa-star-o').addClass('fa-star');
star_i2.removeClass('fa-star-o').addClass('fa-star');
star_i3.removeClass('fa-star-o').addClass('fa-star');
star_i4.removeClass('fa-star-o').addClass('fa-star');
star_i5.removeClass('fa-star-o').addClass('fa-star');
}
else { hoverStar1(); hoverStar2(); hoverStar3(); hoverStar4(); hoverStar5(); }
