jQuery 切换收音机/父样式也将切换不同名称的相邻收音机答案

【问题标题】：jQuery toggle radio/parent style will also toggle neighboring radios of different namesjQuery 切换收音机/父样式也将切换不同名称的相邻收音机
【发布时间】：2012-06-23 02:02:02
【问题描述】：

首先让您了解我的 HTML 是什么样的，我有一个包含 3 组单选按钮的页面，每组单选按钮由它们的容器命名（即 Page1、Page2、Page3）。所以第一组收音机都共享名称“page1”，第二组共享名称“page2”，依此类推。

所以我使用 jQuery 来切换单选按钮和该单选的包含表的类（即 addClass、removeClass on toggle）。切换工作正常，在切换上添加和删除类也是如此。我的问题是，如果我选择了 page2 或 page3 中的收音机，然后选择/重新选择 page1 收音机，jQuery 将删除 page2 和 page3 选中收音机样式的类。

这是JSfiddle Demo.的链接

下面是我正在使用的 jQuery。

$(function() {

$('table').click(function(event) {
    $(this).closest('.container').addClass('selected').parent().siblings().each(function() {
        $(this).find('.container').removeClass('selected');
    });

    if(event.target.type != "radio") {

        var that = $(this).find('input:radio');

        that.attr('checked', !that.is(':checked'));

        if (that.is(':checked'))  {
        that.closest('table').addClass('selected');
    }
   else {
        that.closest('table').removeClass('selected');
}
    }
});
});

【问题讨论】：

标签： jquery toggle radio removeclass closest

【解决方案1】：

.parent().siblings() 正在拾取其他页面，因为如果您添加它解决了问题http://jsfiddle.net/5YnBq/1/，那么第 1 页周围没有div

【讨论】：

非常感谢！这正是我的问题：D

【解决方案2】：

好吧，我不是 100% 对此，但请尝试 event.preventDefault();

我认为它正在冒泡，因此当它以 input:radio 为目标时，它使用最外层的表格，因此它基本上会针对所有单选按钮。我没有对此进行测试，因为单击继续后小提琴对我不起作用，但试一试看看会发生什么

【讨论】：