Update Rating total as a % using jQuery

Ok we are making a rating script, in fact it all works.

The code is split across 20 ratings, that we require users to rate. They have each 10 values.

Code like so:

<div class="ctrlHolder">
<p class="label">Housing Affordability</p>
<div class="multiField starify" id="question-1">
    <label for="vote-1_1" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_1" data-cost="0" value="Very Poor" /> Very Poor</label>
    <label for="vote-1_2" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_2" data-cost="1.0" value="Poor" /> Poor</label>
    <label for="vote-1_3" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_3" data-cost="1.5" value="Not that Bad" /> Not that Bad</label>
    <label for="vote-1_4" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_4" data-cost="2.0" value="Fair" /> Fair</label>
    <label for="vote-1_5" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_5" data-cost="2.5" value="Average" /> Average</label>
    <label for="vote-1_6" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_6" data-cost="3.0" value="Almost" /> Almost</label>
    <label for="vote-1_7" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_7" data-cost="3.5" value="Good" /> Good</label>
    <label for="vote-1_8" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_8" data-cost="4.0" value="Very Good" /> Very Good</label>
    <label for="vote-1_9" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_9" data-cost="4.5" value="Excellent" /> Excellent</label>
    <label for="vote-1_10" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_10" data-cost="5.0" value="Perfect" /> Perfect</label>
</div>

ABove shows 1 question. Or sorry one Rating, which appears like this:

Now the user selects the amount of stars they think that QUESTION affords, so in this example the user has selected 8 stars , for Housing Affordability.

This is appended a data-cost of 4.0

Because we have 20 questions, the maths is like so:

20 questions = 100% max score rating. ( if users 10 stars everything. )

Thus each question is worth 5% of total score, and because there are 10 stars in each rating, each star has a individual value of .5%

So in this case, above 8 star rating = 4%

What I want to achieve, is...

As the user goes thru the questions we have a FIXED div, which updates the current rating %

Like so:

What I need is some help doing the jQuery.

I need to echo the current selection from question 1, into the Your Rating: element.

And update it as we go, so if user rates next item 8 stars , the rating shows 8% and updates on page as they go thru the ratings.

To keep it tidy, I have split the rating page into 4, and we paginate across the rating pages, 1 to 4 using back and next.

Obviously we need to add validation as we go, but wondered if anyone knows method to do what I want to achieve...

I had read about (prop) method, but I am getting confused.

Any help appreciated, please.

开发者_如何学编程To CLARIFY:

data-cost isnt used anywhere else, it is just something I have added to do the math as we go

UPDATE:

DEMO setup. http://sitehelp.com.au/demos/starrating/demo7c.html

Issue seems to be each rating is cloaked into a sibling div.

This function will calculate the rating for you on the current page making each star worth 0.5%:

function getRating(){
    var rating = 0;
    $('input[id^="vote-"]:checked').each(function(){
        rating += $(this).attr('id').match(/vote-\d+_(\d+)/)[1]/2;
        }
    );
    return rating;
}

You can use that on a change event for your inputs like:

$('input[id^="vote-"]').change(function(){
    var rating = getRating();
    // Add in value from previous page
    // Somewhere around here
    $('#rating-display').text(rating+'%');
});

EDIT: now with unique IDs

Try something like this jsfiddle

For future reference. If the link is broken. Check Gaby's code. It's almost exactly the same.

Since you have the data-cost attribute you can do this

var rating=0;
$('.starify :checked').each(function(){
  rating += +$(this).data('cost');
});

and just show this on some element with

$('someid').text(rating);

Tie all this to the radio-button click event, and you are set..

$('.starify :radio').live('click', function(){
    var rating=0;
    $('.starify :checked').each(function(){
      rating += +$(this).data('cost');
    });

    $('someid').text(rating);
});

working demo at http://jsfiddle.net/gaby/9767h/1/

Update

If you do not use the data-cost attribute, as is the case in your live example, then you can use the index of the radio-button (or its parent label in this case) in the group of stars.

$('.starify :radio').live('click', function(){
    var rating=0;
    $('.starify :checked').each(function(){
      rating += ($(this).parent().index()+1) * 0.5;
    });

    $('#rating').text(rating + ' %');
});

demo at http://jsfiddle.net/gaby/7BAuk/