jquery - 通过为视觉和后端选择的星形图像进行评级时出现的问题选择输入类型 radio 的隐藏值

Question

您好，我正在尝试通过视觉点击星形图像来获取输入类型 radio 的值并且在这方面取得了成功，但我坚持重置另一行的明星形象看看这个 fiddle http://jsfiddle.net/sarfarazdesigner/T9nxq/

我已经描述了我所做的我已经接受了输入类型的 radio 并给他 position relative并取另一个 div 并给他 position absolute 并将其放入特定的 inputs 并通过 clicking image 我将 input 设置为 click 在此我成功获得了值(value)，但陷入困境设置星星图像请帮助我，对不起我的英语谢谢:-)

<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-->

Answer 1

几个小时后，我终于解决了星星问题，看看这个链接jsfiddle.net/sarfarazdesigner/myLTC/1/我得到了我想要的，归功于@Morpheus 和我的一点头脑:-)