Q:

AJAX tick and cross control

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. 

A:

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>

