单击表行时选中和取消选中复选框

Question

Right now I have my script setup so that when each checkbox inside a table row is checked it performs the functions required (addClass and some others).

I would also like the checkboxs to check/uncheck and perform the same functions when the individual table row is clicked.

Here is my code for the checkbox functions:

$('input[type="checkbox"]').bind('click',function(e) {
        var $this = $(this);
        if($this.is(':checked')) { 
               num += 1;
               $('#delete_btn').fadeIn('fast');
               $this.parents('tr').addClass('selected'); 
               select_arr.unshift(this.id);
        } else { 
               num -= 1;
               if(num  <= 0) { 
                $('#delete_btn').fadeOut('fast'); 
               }
           $this.parents('tr').removeClass('selected'); 
               select_arr.shift(this.id);
        }
    });

What would be the best way to achieve the same result that this code does by just clicking the table row itself rather than the checkbox, but still allowing the checkboxes to function the same.

Here is the table:

Thanks in Advance.

Answer 1

$("tr").click(function(){
    $(this).child("input:checkbox").eq(0).click();
});

You may want to add a class to the tr tags so that they are discernable from other tr tags on page (ex: <tr class="ticketTR">.. and just add the click function to those:::

$("tr.ticketTR").click(function(){
    $(this).child("input:checkbox").eq(0).click();
});

Answer 2

I ended up finding a great resource for this exact problem.

Check it out:

Quick Tip: Click Table Row to Trigger a Checkbox Click