jQuery radio onchange切换父元素的类？
请看看以下内容：
$('#myRadio').change(function() { if($(this).is(':checked')) { $(this).parent().addClass('green'); } else { $(this).parent().removeClass('green'); } }); Markup看起来有些如下
Some text 1 Some text 2 Some text 3
当我切换无线电时，上面的javascript代码将“绿色”应用于TD标签，这很好。 但是，如果我将选择更改为另一个，则将绿色添加到另一个，但不会从先前选择的无线电中删除绿色。
如何使其工作，以便选择一个无线电选项将其父TD的类更改为绿色，选择另一个将重置所有，但只为新选择添加绿色！
它是否也可以改变它的第一个TD的类，其中包含“some text 3”等？
谢谢。
尝试这样的事情：
if($(this).is(':checked')) { $(this).parent().parent().parent().find('.green').removeClass('green'); $(this).parent().addClass('green'); }
这将找到当前单选按钮分组的表元素，查找绿色类的任何元素，并删除该类。
或者，如果页面上只有一个单选按钮组，则执行以下操作会更简单：
$('.green').removeClass('green');
您不应该在单选按钮和复选框上使用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'); } });
试试这个：
if($(this).is(':checked')) { $(this).parent().siblings('td.green').removeClass('green'); $(this).parent().addClass('green'); }
我刚刚编写了一个解决方案，它不关心单选按钮的嵌套程度，它只使用单选按钮的name属性。 这意味着这段代码无需任何修改即可工作，我认为 – 我必须编写它，因为我有一个奇怪的情况，其中一个单选按钮的嵌套方式与其同名的同类组件不同。
$('input[type="radio"]').change( function() { // grab all the radio buttons with the same name as the one just changed var this_radio_set = $('input[name="'+$(this).attr("name")+'"]'); // iterate through each // if checked, set its parent label's class to "selected" // if not checked, remove the "selected" class from the parent label // my HTML markup for each button is // so that this works anywhere even without a unique ID applied to the button and label for (var i=0; i < this_radio_set.length;i++) { if ( $(this_radio_set[i]).is(':checked') ) $(this_radio_set[i]).parents('label').addClass('selected'); else $(this_radio_set[i]).parents('label').removeClass('selected'); } });
我的建议是：
$('#myRadio').change(function() { _parent = $(this).parent(); if($(this).is(':checked')) { _parent.addClass('green'); } else { _parent.removeClass('green'); } });
这是对我有用的解决方案：
var $boxes=$('input:radio'); var $parents = $boxes.parent(); $boxes.click(function(){ $parents.filter('.selected').removeClass('selected'); $(this).parent().addClass('selected'); }); $boxes.filter(':checked').parent().addClass('selected');
特征：
- 快点。 仅选择一次复选框列表。
- 不依赖：检查。 我不确定是否存在跨浏览器执行“clicked”和“changed”的特定顺序。
- 使用：radio而不是[type =“radio”]，这是jQuery推荐的
- 在父级上设置class作为单选按钮的默认值。
希望这可以帮助！
我认为这是最好，更灵活的方法：
忘了桌子（谷歌知道很多原因）并使用下面的包装
像这样的CSS格式
span.radio { background-color: #cccccc; } span.currentGreen { background-color: #ccffcc; }
使用此脚本，您可以根据需要完全相同
$('.myRadio').change(function() { $('.currentGreen').removeClass('currentGreen'); // remove from all if ($(this).is(':checked')) { $(this).parent().addClass('currentGreen'); // add to current } });
我不喜欢使用filter（）和find（），因为在这种情况下他们使用不必要的资源。