Question

I have some jQuery that sets an image as a radio button for a star rating system. I wish to include a function that when the user cicks a radio button the image changes to checked and the previous radios are also change to checked.

I have managed to change the class of the checked button and I have some code that would change the class on the previous buttons also, but on a simpler div structure. I have been able to combine the both.

The code to change the class for the radio button

$(function() {
    $('input:radio').each(function() {
        $(this).hide();
        $('<a title=" check me " class="radio-fx '+this.name+'" href="#"><div class="radio"></div></a>').insertAfter(this);
    });
    $('.radio-fx').live('click',function(e) {
        e.preventDefault();
        $check = $(this).prev('input');
        var unique = '.'+this.className.split(' ')[1]+' div';
        $(unique).attr('class', 'radio');
        $(this).find('div').attr('class', 'radio-checked');
        $check.attr('checked', true);
    });

});

html:

                  <div class="voteGroup">
                        <input type="radio" id="price_0" value="1" name="price" style="display: none;" checked="checked">
                        <a href="#" class="radio-fx price" title=" check me ">
                            <div class="radio-checked"></div>
                        </a>
                        <input type="radio" id="price_1" value="2" name="price" style="display: none;" checked="checked">
                        <a href="#" class="radio-fx price" title=" check me ">
                             <div class="radio"></div>
                        </a>
                        <input type="radio" id="price_2" value="3" name="price" style="display: none;" checked="checked">
                        <a href="#" class="radio-fx price" title=" check me ">
                              <div class="radio"></div>
                        </a>

                    </div>

Code that I tried to integrate to set previous ones to checked on hover:

        $('.radio-fx').hover(
            // Handles the mouseover
            function() {
                $(this).prevAll().andSelf().addClass('radio-checked');
                $(this).nextAll().removeClass('radio');
            },
            // Handles the mouseout
            function() {
                $(this).prevAll().andSelf().removeClass('radio');
            }
        );

Thanks for any help.

Answer 1

<div class="voteGroup">
    <input type="radio" id="price_0" value="1" name="price" style="display: none;" checked="checked">
    <a href="#" class="radio-fx price" title=" check me ">
        <div class="radio"></div>
    </a>
    <input type="radio" id="price_1" value="2" name="price" style="display: none;" checked="checked">
    <a href="#" class="radio-fx price" title=" check me ">
         <div class="radio"></div>
    </a>
    <input type="radio" id="price_2" value="3" name="price" style="display: none;" checked="checked">
    <a href="#" class="radio-fx price" title=" check me ">
          <div class="radio"></div>
    </a>
</div>
<style type="text/css">
    .radio-fx { float:left;margin:10px;}
    .radio-fx .radio{ background:#ff0; width:20px; height:20px;}
    .radio-checked .radio{ background:#f0f;}
</style>
<script type="text/javascript" src="../share/libs/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.radio-fx').live( "mouseenter", function() { // Handles the mouseover
            var $self = $(this);
            $self.addClass('radio-checked').prevAll().addClass('radio-checked');
            $self.nextAll().removeClass('radio-checked');
    }).live ( "mouseout", function() { // Handles the mouseout
            $(this).removeClass('radio').prevAll().removeClass('radio'); // what is this for?
    });
});
</script>

complete test code here, have a try