2

我想做的是能够突出显示我已经完成的所选单选按钮的父级。我遇到的问题是从未选择的收音机中删除 .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/

4

4 回答 4

5

从被点击的 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/

于 2013-05-08T20:17:13.333 回答
1

我建议：

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

JS Fiddle 演示（请注意，页面加载时默认有两个radio元素）。checked

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

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

JS 小提琴演示

于 2013-05-08T20:18:24.820 回答
0

我会做一些稍微不同的事情以使代码更合乎逻辑。

但首先，这是一个小提琴演示（感谢提供一个！）：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');

我希望这会有所帮助！

于 2013-05-08T20:34:30.240 回答
0

在 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——

修复了一些格式

于 2013-05-08T20:21:52.087 回答