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

时间:2011-03-15 21:11:19

标签: javascript jquery

现在我已经设置了脚本,以便在检查表格行中的每个复选框时,它会执行所需的功能(addClass和其他一些功能)。

我还想在单击单个表行时选中/取消选中复选框并执行相同的功能。

以下是我的复选框功能代码:

$('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);
        }
    });

通过单击表行而不是复选框来实现与此代码相同的结果的最佳方法是什么,但仍然允许复选框的功能相同。

以下是表格: enter image description here

先谢谢。

2 个答案:

答案 0 :(得分:1)

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

您可能想要在tr标签中添加一个类,以便它们可以从页面上的其他tr标签中辨别出来(例如:&lt; tr class =“ticketTR”&gt; ..并且只需将click函数添加到那些:: :

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

答案 1 :(得分:0)

我最终为这个确切的问题找到了很好的资源。

检查出来:

Quick Tip: Click Table Row to Trigger a Checkbox Click