AJAX刻度和交叉控制

问题描述

我想为ASP.NET实现刻度和交叉控制，其作用类似于一对单选按钮（或复选框），但在视觉上更具吸引力。彼此之间将出现一个褪色的刻度线和十字线，单击时将其突出显示。单击另一个时，选择会更改。我需要能够读取服务器端代码上的选择状态。 这将需要用Javascript实现，因为我想避免每次单击其中一张图像时发生不必要的回发。 最初，我考虑过改编AJAX控件工具包的“评级”控件，但看不到如何做。 有什么建议吗？我对AJAX不太满意，因此示例代码将不胜感激。     

解决方法

我最近在网站上实现了类似的功能。 \“ checkbox \”是样式为

<a>

的标记，具有两种样式。

active

和

in-active

。我有一些jQuery，当用户单击“ 0”标记时，它将更新使用哪个CSS类。同样，当用户单击标签时，我然后使用与所选值相对应的值更新了页面上的隐藏字段。然后，当页面回发时，我可以获取隐藏字段的值。 一个例子是：

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