jQuery radio onchange 切换父元素的类？

Question

请查看以下内容：

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

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

标记看起来有点像以下内容

<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');
    }
});

Answer 3

尝试这个：

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

Answer 4

我刚刚编写了一个解决方案，它不关心单选按钮的嵌套深度，它只使用单选按钮的名称属性。 这意味着这段代码无需任何修改即可工作，我认为 - 我必须编写它，因为我遇到了一种奇怪的情况，其中一个单选按钮的嵌套方式与其同名的群组不同。

$('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  <label><input type="radio" /> Label Text</label>
    // 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');
    }
});

Answer 5

我的建议是：

$('#myRadio').change(function() {           
    _parent = $(this).parent();
    if($(this).is(':checked'))  {
       _parent.addClass('green');
    } else {                              
       _parent.removeClass('green');
    }
});

Answer 6

这是对我来说非常有效的解决方案：

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');

特点：

• 更快。 仅选择复选框列表一次。
• 不依赖于 :checked。 我不确定跨浏览器执行“单击”和“更改”是否有一定的顺序。
• 使用 :radio 而不是 [type="radio"] ，这是 jQuery 建议
• 在父级上设置单选按钮的默认值的类。

希望这可以帮助！

Answer 7

我认为这是最好、更灵活的方法：

忘记表格（谷歌知道很多原因）并使用像下面

<div id="radio_wrapper">
    <span class="radio">
        <label for="myRadio1" class="myRadio">Some text 1 </label>
        <input type="radio" value="txt1" name="myRadio" id="myRadio1" class="myRadio" />
    </span>
    <span class="radio">
        <label for="myRadio2" class="myRadio">Some text 2 </label>
        <input type="radio" value="txt2" name="myRadio" id="myRadio2" class="myRadio" />
    </span>
    <span class="radio">
        <label for="myRadio3" class="myRadio">Some text 3 </label>
        <input type="radio" value="txt3" name="myRadio" id="myRadio3" class="myRadio" />
    </span>
</div

这样的格式和 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() 因为它们在这种情况下使用不必要的资源。