Hi i am trying to get value of input type radio by clicking on a star image by vision and am success in this but am stuck in resetting the star image in other row take a look of this fiddle http://jsfiddle.net/sarfarazdesigner/T9nxq/
I have describe what i have done i have take input type radio and give him position relative
and take a another div and give him position absolute and put it to that perticular inputs and by clicking on image i set input to click in this am success in getting value but am stuck in
setting stars image help me please and sorry for my english thanks :-)
<div class="ratingDiv review">
<div class="row">
<label class="lbl">Features : </label>
<div class="ratingwrap">
<div style="position:relative;">
<div class="fkdiv">
<input type="radio" id="poor" class="rtchk" name="Features" value="1" />
<input type="radio" id="average" class="rtchk" name="Features" value="2" checked="checked" />
<input type="radio" id="good" class="rtchk" name="Features" value="3" />
<input type="radio" id="verygood" class="rtchk" name="Features" value="4" />
<input type="radio" id="excellent" class="rtchk" name="Features" value="5" />
</div>
<div class="rateMe" title="Rate Me...">
<a id="_1" title="poor" class="hvr"></a>
<a id="_2" title="average" class="hvr"></a>
<a id="_3" title="good" class="hvr"></a>
<a id="_4" title="verygood" class="hvr"></a>
<a id="_5" title="excellent" class="hvr"></a>
</div>
<div class="rateStatus">this is awesome</div>
</div>
</div>
</div>
<div class="row">
<label class="lbl">Support : </label>
<div class="ratingwrap">
<div style="position:relative;">
<div class="fkdiv">
<input type="radio" id="poor" class="rtchk" name="Support" value="1" />
<input type="radio" id="average" class="rtchk" name="Support" value="2" checked="checked" />
<input type="radio" id="good" class="rtchk" name="Support" value="3" />
<input type="radio" id="verygood" class="rtchk" name="Support" value="4" />
<input type="radio" id="excellent" class="rtchk" name="Support" value="5" />
</div>
<div class="rateMe" title="Rate Me...">
<a id="_6" title="poor" class="hvr"></a>
<a id="_7" title="average" class="hvr"></a>
<a id="_8" title="good" class="hvr"></a>
<a id="_9" title="verygood" class="hvr"></a>
<a id="_10" title="excellent" class="hvr"></a>
</div>
</div>
</div>
</div>
<div class="row">
<label class="lbl">Userfriendly : </label>
<div class="ratingwrap">
<div style="position:relative;">
<div class="fkdiv">
<input type="radio" id="poor" class="rtchk" name="Userfriendly" value="1" />
<input type="radio" id="average" class="rtchk" name="Userfriendly" value="2" checked="checked" />
<input type="radio" id="good" class="rtchk" name="Userfriendly" value="3" />
<input type="radio" id="verygood" class="rtchk" name="Userfriendly" value="4" />
<input type="radio" id="excellent" class="rtchk" name="Userfriendly" value="5" />
</div>
<div class="rateMe" title="Rate Me...">
<a id="_11" title="poor" class="hvr"></a>
<a id="_12" title="average" class="hvr"></a>
<a id="_13" title="good" class="hvr"></a>
<a id="_14" title="verygood" class="hvr"></a>
<a id="_15" title="excellent" class="hvr"></a>
</div>
</div>
</div>
</div>
<div class="row">
<label class="lbl">Customer Values : </label>
<div class="ratingwrap">
<div style="position:relative;">
<div class="fkdiv">
<input type="radio" id="poor" class="rtchk" name="Customer" value="1" />
<input type="radio" id="average" class="rtchk" name="Customer" value="2" checked="checked" />
<input type="radio" id="good" class="rtchk" name="Customer" value="3" />
<input type="radio" id="verygood" class="rtchk" name="Customer" value="4" />
<input type="radio" id="excellent" class="rtchk" name="Customer" value="5" />
</div>
<div class="rateMe" title="Rate Me...">
<a id="_16" title="poor" class="hvr"></a>
<a id="_17" title="average" class="hvr"></a>
<a id="_18" title="good" class="hvr"></a>
<a id="_19" title="verygood" class="hvr"></a>
<a id="_20" title="excellent" class="hvr"></a>
</div>
</div>
</div>
</div>
<div class="row">
<label class="lbl">Reliability : </label>
<div class="ratingwrap">
<div style="position:relative;">
<div class="fkdiv">
<input type="radio" id="poor" class="rtchk" name="Reliability" value="1" />
<input type="radio" id="average" class="rtchk" name="Reliability" value="2" checked="checked" />
<input type="radio" id="good" class="rtchk" name="Reliability" value="3" />
<input type="radio" id="verygood" class="rtchk" name="Reliability" value="4" />
<input type="radio" id="excellent" class="rtchk" name="Reliability" value="5" />
</div>
<div class="rateMe" title="Rate Me...">
<a id="_21" title="poor" class="hvr"></a>
<a id="_22" title="average" class="hvr"></a>
<a id="_23" title="good" class="hvr"></a>
<a id="_24" title="verygood" class="hvr"></a>
<a id="_25" title="excellent" class="hvr"></a>
</div>
</div>
</div>
</div>
<div class="row">
<label class="lbl">After Sales Services : </label>
<div class="ratingwrap">
<div style="position:relative;">
<div class="fkdiv">
<input type="radio" id="poor" class="rtchk" name="Services" value="1" />
<input type="radio" id="average" class="rtchk" name="Services" value="2" checked="checked" />
<input type="radio" id="good" class="rtchk" name="Services" value="3" />
<input type="radio" id="verygood" class="rtchk" name="Services" value="4" />
<input type="radio" id="excellent" class="rtchk" name="Services" value="5" />
</div>
<div class="rateMe" title="Rate Me...">
<a id="_26" title="poor" class="hvr"></a>
<a id="_27" title="average" class="hvr"></a>
<a id="_28" title="good" class="hvr"></a>
<a id="_29" title="verygood" class="hvr"></a>
<a id="_30" title="excellent" class="hvr"></a>
</div>
</div>
</div>
</div>
<div class="row">
<label class="lbl">Over all Rating : </label>
<div class="ratingwrap">
<div style="position:relative;">
<div class="fkdiv">
<input type="radio" id="poor" class="rtchk" name="rating" value="1" />
<input type="radio" id="average" class="rtchk" name="rating" value="2" checked="checked" />
<input type="radio" id="good" class="rtchk" name="rating" value="3" />
<input type="radio" id="verygood" class="rtchk" name="rating" value="4" />
<input type="radio" id="excellent" class="rtchk" name="rating" value="5" />
</div>
<div class="rateMe" title="Rate Me...">
<a title="poor" class="hvr"></a>
<a title="average" class="hvr"></a>
<a title="good" class="hvr"></a>
<a title="verygood" class="hvr"></a>
<a title="excellent" class="hvr"></a>
</div>
</div>
</div>
</div>
</div><!--rating review div end here-->
Finally after a couple of hours i've fixed the issue of stars take a look of this link jsfiddle.net/sarfarazdesigner/myLTC/1/ i got what i want and credit goes to @Morpheus and a little bit of my head :-)