Проблема в том что в value передается всегда только последнее значение, а не выбранное. И не получается у меня исправить это.
JS-код
$(document).ready(function(){
starRating.create('.stars');
});
// The widget
var starRating = {
create: function(selector) {
// loop over every element matching the selector
$(selector).each(function() {
var $list = $('<div></div>');
// loop over every radio button in each container
$(this)
.find('input:radio')
.each(function(i) {
var rating = $(this).parent().text();
var $item = $('<a href="#"></a>')
.attr('title', rating)
.addClass(i % 2 == 1 ? 'rating-right' : '')
.text(rating);
starRating.addHandlers($item);
$list.append($item);
if($(this).is(':checked')) {
$item.prevAll().andSelf().addClass('rating');
}
});
// Hide the original radio buttons
$(this).append($list).find('label').hide();
});
},
addHandlers: function(item) {
$(item).click(function(e) {
// Handle Star click
var $star = $(this);
var $allLinks = $(this).parent();
// Set the radio button value
$allLinks
.parent()
.find('input:radio[value=' + $star.text() + ']')
.attr('checked', true);
// Set the ratings
$allLinks.children().removeClass('rating');
$star.prevAll().andSelf().addClass('rating');
// prevent default link click
e.preventDefault();
}).hover(function() {
// Handle star mouse over
$(this).prevAll().andSelf().addClass('rating-over');
}, function() {
// Handle star mouse out
$(this).siblings().andSelf().removeClass('rating-over')
});
}
}
CSS
.stars div a {
background: transparent url(../images/sprite_rate.png) 0 0 no-repeat;
display: inline-block;
height: 23px;
width: 12px;
text-indent: -999em;
overflow: hidden;
}
.stars a.rating-right {
background-position: 0 -23px;
padding-right: 6px;
}
.stars a.rating-over {
background-position: 0 -46px;
}
.stars a.rating-over.rating-right {
background-position: 0 -69px;
}
.stars a.rating {
background-position: 0 -92px;
}
.stars a.rating.rating-right {
background-position: 0 -115px;
}
И HTML
<div class="stars" style="margin-top: -5px; float: right; padding-right: 650px;">
<label for="rating-1"><input id="rating-1" name="rating" type="radio" value="0.5"/>0.5 балла</label>
<label for="rating-2"><input id="rating-2" name="rating" type="radio" value="1"/>1 балл</label>
<label for="rating-3"><input id="rating-3" name="rating" type="radio" value="1.5"/>1.5 балла</label>
<label for="rating-4"><input id="rating-4" name="rating" type="radio" value="2"/>2 балла</label>
<label for="rating-5"><input id="rating-5" name="rating" type="radio" value="2.5"/>2.5 балла</label>
<label for="rating-6"><input id="rating-6" name="rating" type="radio" value="3"/>3 балла</label>
<label for="rating-7"><input id="rating-7" name="rating" type="radio" value="3.5"/>3.5 балла</label>
<label for="rating-8"><input id="rating-8" name="rating" type="radio" value="4"/>4 балла</label>
<label for="rating-9"><input id="rating-9" name="rating" type="radio" value="4.5"/>4.5 балла</label>
<label for="rating-10"><input id="rating-10" name="rating" type="radio" value="5"/>5 баллов</label>
</div>