如何触发复选框的更改或单击一行以选择表格行？

发布于 2025-01-08 15:21:52 字数 854 浏览 0 评论 0原文

我有一个第一列带有复选框的表格。

可以通过 (a) 选中复选框或 (b) 单击该行来选择行。所选行应突出显示。

我的问题是我可以让其中之一单独工作，但不能让两者一起工作。这就是我所拥有的：

 // click on row      
 $('table tbody tr').click( function() {
    $(this).find( "th input:checkbox").trigger('change');
    // $(this).find( "th input:checkbox").trigger('click');
});

 // change listener
 $('.tr input:checkbox').live( "change", function () {
    console.log("change triggered");

  var row = $(this).closest('tr');

  if ( $(this).attr('checked') == "checked" ) {
          row.addClass( 'ui-btn-hover-c' ).removeClass( 'row_selected ui-btn-up-e' )
          } else {
              row.addClass('row_selected ui-btn-hover-e' ).removeClass( "ui-btn-up-c");
          }
  });

我想我只需将对 TR 的点击路由到复选框更改处理程序中，因此只有一个地方可以检查所选行并处理类添加/删除。

但是我无法让它工作。上面的内容以某种方式创建了一个无限循环，我不知道如何让它正常工作。

原文

I have a table with checkboxes in the first column.

Rows can be selected either by (a) checking the checkbox or (b) clicking on the row. Selected rows should be highlighted.

My problem is I can get either one to work separately, but not both together. Here is what I have:

 // click on row      
 $('table tbody tr').click( function() {
    $(this).find( "th input:checkbox").trigger('change');
    // $(this).find( "th input:checkbox").trigger('click');
});

 // change listener
 $('.tr input:checkbox').live( "change", function () {
    console.log("change triggered");

  var row = $(this).closest('tr');

  if ( $(this).attr('checked') == "checked" ) {
          row.addClass( 'ui-btn-hover-c' ).removeClass( 'row_selected ui-btn-up-e' )
          } else {
              row.addClass('row_selected ui-btn-hover-e' ).removeClass( "ui-btn-up-c");
          }
  });

I thought I would just route the clicks on TR into the checkbox change handler, so there is only one place that checks for selected rows and handles class addition/removal.

However I can't get it to work. The above somehow creates an endless loop and I have no idea how to get it working properly.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遗失的美好 2025-01-15 15:21:52

如果您在一行上有一个侦听器，并且在该行内的复选框上有另一个侦听器，那么当您单击该复选框时，这两个侦听器都会被触发，除非您停止事件传播。即单击复选框也是单击 tr。

通常您会使用 event.stopPropagation(); 但您不能在 live() 方法上使用它，因为事件已经传播。

http://api.jquery.com/event.stopPropagation/

在您的情况下，如果您可以从使用 live 更改为使用 click，然后您可以使用：

event.stopPropagation();

防止单击复选框触发单击表行。

If you have a listener on a row, and another listener on a checkbox within the row then both of these will be fired when you click on the checkbox unless you stop the event propagation. i.e. The click on the checkbox is also a click on the tr.

Normally you would use event.stopPropagation(); but you cannot use this on the live() method as the event will have already propagated.

http://api.jquery.com/event.stopPropagation/

In your case, if you can change from using live to using click you could then use: