AJAX 刻度和交叉控制答案

【问题标题】：AJAX tick and cross controlAJAX 刻度和交叉控制
【发布时间】：2011-05-23 06:58:17
【问题描述】：

我想为 ASP.NET 实现一个刻度和交叉控件，它的作用类似于一对单选按钮（或一个复选框），但在视觉上更具吸引力。将有一个褪色的勾号和一个交叉的并排，当单击一个时，它会突出显示。单击另一个时，选择会更改。我需要能够读取服务器端代码的选择状态。

这需要使用 Javascript 来实现，因为我想避免每次点击其中一张图片时出现不必要的回发。

我最初想调整 AJAX Control Toolkit 'Rating' 控件，但不知道如何。

有什么建议吗？我不太擅长 AJAX，因此非常感谢示例代码。

【问题讨论】：

标签： asp.net ajax asp.net-ajax ajaxcontroltoolkit

【解决方案1】：

我最近在一个网站上实现了一些非常相似的东西。 “复选框”是一个样式化的<a> 标签，它有两种样式。 active 和 in-active。我有一些 jQuery，当用户单击 <a> 标记时，它会更新使用的 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>

【讨论】：