Jquery在TD单击时选择单选按钮，同时向活动TD添加类

Question

我正在创建一个网格，允许用户选择他们想要的单元格，这将选择一个单选按钮。理想情况下，我可以隐藏单选按钮，并在活动单元中添加一个类，以便用户知道他们选择了哪一个。我现在遇到的问题是，当用户单击单元格时选择单选按钮时，只有在单击实际单选按钮时才会添加该类。另外，当单击另一个框时，它并不总是删除该类。

这是用来添加类的脚本：

$(document).ready(function() { 
    $("td input").change(function() { 
     var $this = $(this); 
     var td = $this.parent(); 
     td.siblings().filter(function() { 
      return !!$(this).find('input[name="'+$this.attr('name')+'"]:radio').length; 
     }).removeClass('activecell'); 
     if(this.checked) { 
      td.addClass('activecell'); 
     } 
    }); 
}); 

和页面 http://jsfiddle.net/VU6dN/

任何帮助，将不胜感激的演示。

Answer 1

将单击处理程序放在单元格上而不是单选按钮上，单击单元格时选择单选按钮并将CSS类别指定给隐藏单元格的单选按钮。像下面这样。此外，这是更新的fiddle that works。

$('td').click(function() { 
    var $cell = $(this); 
    $('td.activecell').removeClass('activecell'); 
    $cell.addClass('activecell'); 
    $cell.children('input').attr('checked', 'checked'); 
}); 

Answer 2

让您的HTML中去掉这些讨厌的onclick处理程序，并使用.trigger('click')代替：

$('td').click(function() { 
     $(this).find('input').trigger('click'); 
    });