AJAX刻度线和交叉控制

I would like to implement a tick and cross control for ASP.NET which acts like a pair of radiobuttons (or a checkbox) but is more visually appealing. There would be a faded tick and cross next to each other, and when one is clicked it becomes highlighted. When the other is clicked, the selection changes. I need to be able to read the selection state on server-side code.

This would need to be implemented with Javascript because I'd like to avoid unnecessary postbacks every time one of the images is clicked.

I initially thought of adapting the AJAX Control Toolkit 'Rating' control, but couldn't see how.

Any suggestions, please? I'm not very good with AJAX so example code would be much appreciated.

I recently implemented something very similar on a website. The "checkbox" was a styled up <a> tag which had two styles. active and in-active. I had some jQuery which would update the which css class was used when a user clicked on the <a> tag. Also when a user clicked the tag, I then updated a hidden field on the page with a value corresponding to the selected value. Then when the page is post back I can pick up the value of the hidded field.

An example would be:

<a href="#" id="optionone" class="checkbox-option active"><span>value one</span></a>
<a href="#" id="optiontwo" class="checkbox-option in-active"><span>value one</span></a>
<asp:HiddenField id="hfSelectedOption" runat="server" />

<script type="text/javascript">
    $().ready(function(){
        $('.checkbox-option').click(function(){
           $('.checkbox-option').removeClass('active').removeClass('in-active').addClass('in-active');
           $(this).addClass('active');
           $('#<%=(hfSelectedOption.ClientID)).val($(this).attr("id"));
        });
    }); 
</script>