Comments on: Quick Tip: Click Table Row to Trigger a Checkbox Click

By: Rizky

Rizky — Fri, 11 Dec 2009 05:05:07 +0000

Nice tip.. Really saves me a lot of time :D Btw, I'm having trouble implementing this with a "check all" button that selects and highlights all rows. my script is like this:

$('input.checkall').click(function() {
  $(this).parents('table').find(':checkbox').attr('checked', this.checked);
  $(this).parents('table').find('tbody tr:not(.selected)').toggleClass('selected');
});

But when I uncheck the "select all" checkbox all the table rows are still highlighted. I know the problem is on the 'tbody tr:not(.selected)' selector. But can somebody point me to the right direction? :D Thx.

By: Jens

Jens — Sat, 21 Nov 2009 14:21:12 +0000

Hi Kris,

thx for the provided solution.
How do I add the “selected” class to the tr? It does not work for me…

By: Joseph Buarao

Joseph Buarao — Tue, 15 Sep 2009 11:13:56 +0000

A really Like this site.. but i want to have a printable copy of this tutorials , could you please send it to me.. Actually Im using mootools, but i want to try jquery because i want to find out which better..

By: Rob

Rob — Mon, 29 Jun 2009 10:59:37 +0000

To make it clear, there is an important number in column 1 in each row. The table is generated by PHP, so I can use this number elsewhere if needed.

By: Rob

Rob — Mon, 29 Jun 2009 10:56:09 +0000

I have a table of data, including one cell containing an important number.

When I click on a row, or a cell containing a href in that rowrow, how can I use this number, in a function call? (It’s actually an ajax call, but I guess that’s not important).

Thanks for any help.

By: Karl Swedberg

Karl Swedberg — Sat, 27 Jun 2009 03:59:32 +0000

Hey, no problem, Dylan. Let me guess ... you're clicking on labels? If that's the case, then you need to add this at the end of that script:

      if (event.target.nodeName === 'LABEL') {
        return false;
      }

I put together a quick demo for you. Let me know if it still doesn't work.

By: Dylan MacDonald

Dylan MacDonald — Sat, 27 Jun 2009 02:40:05 +0000

Sorry forget my allusion to the hover effect. It’s the select and checked that doesn’t work altogether.

By: Dylan MacDonald

Dylan MacDonald — Fri, 26 Jun 2009 23:46:54 +0000

I tried almost every example here and it didn't work as advertised. Sometimes I got the hover effcet, sometimes the select effect, sometimes the checkbox was checked, but never all three. What am I doing wrong?


$(".productGrid.samplesGrid ul li")
			.filter(':has(:checkbox:checked)')
			.addClass('selected')
			.end()
			.live('click', function(event)
			{
			$(this).toggleClass("selected");

			if (event.target.type !== "checkbox")
			{
			checkbox = $(":checkbox", this);
			checkbox.attr("checked", checkbox.is(':not(:checked)'));
			}
			});

and yes this is included within a document.ready function in my code. Thanks.

By: Karl Swedberg

Karl Swedberg — Tue, 16 Jun 2009 19:25:11 +0000

Hi Josh, There is no such nodeName as checkbox. The former code sample is looking for an element with type="checkbox", so it matches all elements.

By: Josh

Josh — Tue, 16 Jun 2009 14:34:22 +0000

I'm new to jQuery, so could someone explain why this works


$('#table_1 tr').click(function(event) {
     if (event.target.type != 'checkbox' && event.target.nodeName != 'LABEL') {
          $('input:checkbox', this).trigger('click');
     }
});

and this doesn't


$('#table_1 tr').click(function(event) {
     if (event.target.nodeName!= 'CHECKBOX' && event.target.nodeName != 'LABEL') {
          $('input:checkbox', this).trigger('click');
     }
});

Is the former the best way to avoid triggering the event when a label is clicked?