如何在用户使用 JQuery 选择单选按钮时应用和/或删除 CSS 类？

Question

我的 Aspx 标记如下。 访问者可以通过选择“获胜问题”单选按钮来选择答案

HiddenFields 包含 True 或 False

所以如果用户选择 rdAnsBool1 并且 HiddenField1 的值为“True”， JQuery 应该将一个“正确”的 CSS 类添加到 ID = Answer

的父 div

如果用户选择 rdAnsBool1 并且 HiddenField1 的值为“False”，则 JQuery 应向 ID = Answer 的父 div 添加一个“错误”的 CSS 类

<div id="Answer" class="Ans">
   <div id ="Left"> 
   <asp:RadioButton ID="rdAnsBool1" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans1") %>' />
   <asp:RadioButton ID="rdAnsBool2" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans2") %>' />
   <asp:HiddenField ID="HiddenField1" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans1Bool") %>'/>
   <asp:HiddenField ID="HiddenField2" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans2Bool") %>'/>
   </div>
</div>

JQuery 怎么会这样？

更新。 Answer div 位于 Listview 中。这就是我想绘制父 div 的原因。

又一次更新 我害怕 JQuery...

标记已更改为以下...因此，我为获胜的解决方案提供 200 个边界。

<div id="Answer" class="Ans">
           <div id ="Left"> 
           <asp:RadioButton ID="rdAnsBool1" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans1") %>' />
           <asp:RadioButton ID="rdAnsBool2" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans2") %>' />
           <asp:RadioButton ID="rdAnsBool3" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans3") %>' />
           <asp:RadioButton ID="rdAnsBool4" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans4") %>' />
           <asp:RadioButton ID="rdAnsBool5" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans5") %>' />
           <asp:RadioButton ID="rdAnsBool6" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans6") %>' />
           <asp:HiddenField ID="HiddenField1" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans1Bool") %>'/>
           <asp:HiddenField ID="HiddenField2" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans2Bool") %>'/>
           <asp:HiddenField ID="HiddenField3" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans3Bool") %>'/>
           <asp:HiddenField ID="HiddenField4" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans4Bool") %>'/>
           <asp:HiddenField ID="HiddenField5" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans5Bool") %>'/>
           <asp:HiddenField ID="HiddenField6" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans6Bool") %>'/>
           </div>
        </div>

这里是 JsFiddle 部分

http://jsfiddle.net/VTevz/

这件事让我发疯了

Answer 1

// get a reference to radio button and attach change handler
$('input[id*="rdAnsBool"]').change(function(){
     var container = $(this).closest('div.Ans'),
         questionid = $(this).attr('id'),
         index = questionid[questionid.indexOf('rdAnsBool') + 1];

     // test for condition and set classes accordingly ...
     if($(this).val() == $(this).parent()
                                .find('input[id*="HiddenField' + index + '"]').val()) {
          container.addClass('correct').removeClass('wrong');
          return;
     }

     container.addClass('wrong').removeClass('correct');
});

更新 （确保在浏览器上下文中工作时发布 HTML 标记而不是 ASP 标记）：

http://jsfiddle.net/VTevz/7/

Answer 2

$('#rdAnsBool1').click(function(e) {
    if ($('#HiddenField1').attr('Value')=='True') {
        $('#Answer').addClass('correct');
    } else {
        $('#Answer').addClass('wrong');
    }
});

Answer 3

由于您没有对单选按钮进行分组，因此可以同时选择它们。您应该在同名的两个按钮中指定GroupName。

指定名称后，让我们说“答案”，您可以试试这个。

$('input[name="answers"]').click(function(){
    if($('#HiddenField' + $(this).index()).val().toLowerCase() == "true"){
        $("#Answer").removeClass('wrong').addClass('correct');  
    }
    else{
        $("#Answer").removeClass('correct').addClass('wrong');
    }
});

Answer 4

确保隐藏的名称与radiobutton 相同，然后就可以了：

$('input[type=radio]').change(function() {
    if (this.checked == $('input[type=hidden],[name=' + this.name + ']').val()) {
        $(this).closet('#Answer').removeClass('correct').addClass('wrong');
    }
    else {
        $(this).closet('#Answer').removeClass('wrong').addClass('correct');
    }
});

Answer 5

如果您将隐藏字段的 ClientID 值添加到各自的单选按钮中，这会更容易。您可以在代码隐藏中执行此操作（例如，在单选按钮的预渲染事件中：RadioButton1.Attributes.Add("value", HiddenField1.ClientID)）。您可能还应该将 CSSClass 添加到您标记为选择的按钮（即，CSSClass="choice" 或 RadioButton1.Attributes.Add("class", "choice")，具体取决于您是要在标记中还是在代码隐藏中进行）。

这应该将您呈现的标记更改为<input type="radio" value="ctl00_cphMain_HiddenField1" name="ctl00$cphMain$RadioButton1" id="ctl00_cphMain_RadioButton1">（或类似的东西）。

一旦你的标记被修改，你的 jQuery 变成：

$('input.choice[type="radio"]').click(function () {
    var $this = $(this);         //easy alias.
    var answer = $this.val();   //hidden field id
    var cssClass = '';
    if ($this.attr('checked')) {
        cssClass = $(answer).val().toLowerCase() === 'true' ? 'correct' : 'wrong';
    }
    $this.removeClass('correct').removeClass('wrong').addClass(cssClass).;
});