jQuery radio onchange toggle父类元素的类？

Question

请看看以下内容:

$('#myRadio').change(function() {           

    if($(this).is(':checked'))  {
        $(this).parent().addClass('green');
    } else {                              
        $(this).parent().removeClass('green');
    }
});

Markup看起来有些如下

<table>
  <tr>
    <td>Some text 1 </td>
    <td><input type="radio" value="txt1" name="myRadio" id="text1" /></td>
    <td>Some text 2 </td>
    <td><input type="radio" value="txt2" name="myRadio" id="text2" /></td>
    <td>Some text 3 </td>
    <td><input type="radio" value="txt3" name="myRadio" id="text2" /></td>
  </tr>
</table>

当我切换无线电时,上面的javascript代码将"绿色"应用于TD标签,这很好.但是,如果我将选择更改为另一个,则将绿色添加到另一个,但不会从先前选择的无线电中删除绿色.

如何使其工作,以便选择一个无线电选项将其父TD的类更改为绿色,选择另一个将重置所有,但只为新选择添加绿色!

它是否也可以改变它的第一个前一个TD的类,其中包含"一些文本3"等？

谢谢.

Answer 1

尝试这样的事情:

if($(this).is(':checked'))  {
    $(this).parent().parent().parent().find('.green').removeClass('green');
    $(this).parent().addClass('green');
}

这将找到当前单选按钮分组的表元素,查找绿色类的任何元素,并删除该类.

或者,如果页面上只有一个单选按钮组,则执行以下操作会更简单:

$('.green').removeClass('green');

Answer 2

您不应该在单选按钮和复选框上使用change()事件.它在浏览器中表现得有点狡猾且不一致(它会导致IE的所有版本出现问题)

改为使用click()事件(不要担心可访问性,因为如果激活/选择带键盘的单选按钮,也会触发click事件)

正如其他人在此指出的那样,重置绿色也很容易:

所以只需将代码更改为

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parent().addClass('green');
    }
});

编辑:按照评论中的要求,也改变以前的td:

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parent().prev().andSelf().addClass('green');
    }
});

甚至更好,将父行的所有td元素变为绿色:

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parents("tr").find("td").addClass('green');
    }
});