选择单选按钮上的TD点击，同时添加类的活动TD

Jquery Select Radio Button on TD click, while adding class to active TD

本文关键字：TD 添加 活动 点击 单选按钮 选择      更新时间：2023-09-26

我希望创建一个网格，允许用户选择他们想要的单元格，这将选择一个单选按钮。理想情况下，我将能够隐藏单选按钮，并有一个类添加到活动单元格，这样用户就知道他们选择了哪一个。我现在遇到的问题是，虽然当用户单击单元格时选择了单选按钮，但只有在单击实际的单选按钮时才添加类。此外，当单击另一个框时，它并不总是删除类。

这是用来添加类的脚本:

$(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/

将单击处理程序放在单元格上而不是单选按钮上，在单击单元格时选择单选按钮，并为隐藏它的单选按钮分配一个CSS类。就像下面这样。此外，这里有一个更新的小提琴，可以工作。

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

在你的HTML中去掉那些讨厌的onclick处理程序，用.trigger('click')代替:

  $('td').click(function () {
      $(this).find('input').trigger('click');
  });
相关文章：