Question

我想要做的是能够突出显示所选单选按钮的父级，我已经完成了。我遇到的问题是从未选择的无线电中删除.sel类。我将在表中设置多个无线电组，每行一组。

以下是我的代码：

$(document).ready(function () {
$('td.radio').click(function () {
    $(this).children('input').prop('checked', true);

    if ($(this).children('input').is(':checked')) {
        $(this).addClass('sel');
    } else {
        $(this).removeClass('sel');
    }
});
});

我在这里设置了一个jsFiddle与我目前管理的内容：http://jsfiddle.net/ASMITH/drYTP/5/

Answer 1

从被点击的td的所有兄弟姐妹中删除sel类，然后将其添加到被点击的那个兄弟姐妹中：

    $('td.radio').click(function () {
        var $this = $(this);
        $this.children('input').prop('checked', true);       
        $this.siblings('td').removeClass('sel');        
        $this.addClass('sel');        
    });

http://jsfiddle.net/drYTP/6/

Answer 2

我建议：

$('td.radio').removeClass('sel').filter(function(){
    return $(this).find('input:checked').length;
}).addClass('sel');

JS Fiddle demo（请注意，默认情况下，页面加载时，两个radio元素为checked。

对于一种更动态的方法（我最初假设它是一个页面加载事件，出于某种原因）使用：

$('input:radio').change(function(){
    $(this).closest('td').addClass('sel').siblings().removeClass('sel');
})

JS Fiddle demo

Answer 3

在jsfiddle上测试过。它仅从单击的行中删除突出显示。

$(document).ready(function () {
$('td.radio').click(function () {
    $(this).parent().children().each(function(){
        $(this).prop('checked', false);
        $(this).removeClass('sel');
    });
    $(this).children('input').prop('checked', true);
    $(this).addClass('sel');

});
});

编辑 -

不确定它是你在寻找什么，但是有了多行，看起来就是你所追求的。 http://jsfiddle.net/ASMITH/drYTP/5/

编辑2 -

修正了一些格式

Answer 4

我会做一些不同的事情来使代码更符合逻辑。

但首先，这是一个小提琴演示（感谢提供一个！）：http://jsfiddle.net/MU2Se/

以下是解释：

不要检查<td>元素（标记为.radio）的点击次数，而是检查实际表单元素的点击。

$('input[type="radio"]').click(function(){
    // ...
}

由于单选按钮按元素名称分组，因此请获取所单击的无线电的元素名称，以便您可以定位该组。

var name = $(this).attr('name');

使用无线电组，只需循环遍历每个元素并删除该类。

$('input[name="'+name+'"]').each(function(){
    $(this).parent().removeClass('sel');
});

注意：我更喜欢这种方法，因为它不会强制您取消/重置所有项目，只有组中的项目。它有助于为我们不需要处理的项目节省一些额外的检查。

由于我们将代码更改为在给定单选按钮上触发，我们只需将该类添加回单击的按钮即可。

 $(this).parent().addClass('sel');

我希望有所帮助！

从未选中的单选按钮的父项中删除类

4 个答案: