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

By: Konrad

Konrad — Mon, 23 May 2011 13:44:23 +0000

Thank you. This is one of a few tutorials which are understandable AND work right away..!

By: William Wallace

William Wallace — Tue, 19 Apr 2011 13:10:03 +0000

I finally made the checkbox functionality just like radio buttons. http://jsfiddle.net/markcoleman/UYkXS/2/

$("#emp_grid tbody tr").click(function(e) {
    $("#emp_grid tbody tr").removeClass("selected");
    var $checkbox = $(this).find(':checkbox');
    $("#emp_grid :checkbox").not($checkbox).removeAttr("checked");
    if (e.target.type == "checkbox") {

        // stop the bubbling to prevent firing the row's click event
        e.stopPropagation();
        $(this).filter(':has(:checkbox)').toggleClass('selected', $checkbox.attr('checked'));
    } else {

        
        $checkbox.attr('checked', !$checkbox.attr('checked'));
        $(this).filter(':has(:checkbox)').toggleClass('selected', $checkbox.attr('checked'));
    }
});

By: Burak

Burak — Sun, 06 Feb 2011 18:09:44 +0000

Rizky, you need to remove “dot”. Try this;

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

By: leiyangkai

leiyangkai — Thu, 28 Oct 2010 04:27:56 +0000

Dear Friend:
i really need your help , i want to do something like this :
first checkbox hidden , and when i click the any other tr area . and the checkbox will be showed . and add the background in the area . and the checkbox must be checked .
when i click the tr area second time that the checkbox will be hidden.
looking forward to your answer , thanks so much and best wishes to you .

By: Karl Swedberg

Karl Swedberg — Thu, 16 Sep 2010 12:11:32 +0000

Hi,
Probably your best bet would be to look for a grid plugin like this one:
http://www.trirand.com/blog/jqgrid/demo38/jqgrid.html

By: anirudh

anirudh — Thu, 16 Sep 2010 06:25:53 +0000

Hi Karl:
Great expertise, and great help throughout! Thank you. I am not sure, if this is not common or you had addressed above (and I missed), I would like an example of table with both ‘sortable columns ‘ and ‘selectable rows’ . Is that possible at all?
Thanks in advance.

By: Agustin

Agustin — Sun, 15 Aug 2010 18:15:28 +0000

This is a nice code, worked perfectly! What If I wanna reset all the form? $("#textlink").click(function(){$("myForm input:checkbox").removeAttr('checked') With this I can only reset the checkboxes but how I can also remove the "selected" class? A simple .removeClass('selected'); doesn't work! Thanks in advance :)

By: Uday

Uday — Mon, 19 Jul 2010 11:33:49 +0000

Thank you Karl, it’s working :)

By: Karl Swedberg

Karl Swedberg — Sun, 18 Jul 2010 00:30:15 +0000

Hi Uday, Something like this would work:


$(document).ready(function() {
  // use your own selector in the next line
  var $rows = $('#sometable tr');

  $rows.filter(function() {
    return !!$(this).find(':checkbox:checked').not(':disabled').length;
  }).addClass('selected');

  $rows.click(function(event) {
    if ( $(this).find(':checkbox').is(':disabled') ) {
      return false;
    }
    $(this).toggleClass('selected');
    if (event.target.type !== 'checkbox') {
      $(this).find(':checkbox').attr('checked', function() {
        return !this.checked;
      });
    }
  });
});

By: Uday

Uday — Thu, 15 Jul 2010 13:24:47 +0000

I am new to jquery, how can i skip the disabled elements in the table, to avoid the toggel (checked and unchecked).