Javascript 单击时如何进行此操作<；tr>；标记复选框

大家好：）我有一段代码，当点击复选框时，会将类“selected”添加到我的表中。但是当我点击我的时，如何使它也能工作呢

<tr>
    <td><input type="checkbox"></td>
    <td><img src="../gallery/thumbnails/1.png" alt=""></td>
    <td>tryb</td>
    <td>png</td>
</tr>
<tr>
    <td><input type="checkbox"></td>
    <td><img src="../gallery/thumbnails/2.png" alt=""></td>
    <td>test</td>
    <td>png</td>
</tr>

<script type="text/javascript">
    $(':checkbox').change(function () {
        $(this).parents('tr').toggleClass('selected', this.checked);
    }).change();
</script>

tryb
巴布亚新几内亚
测验
巴布亚新几内亚
$（'：复选框'）。更改（函数（）{
$（this.parents（'tr'）.toggleClass（'selected'，this.checked）；
}).change（）；

当

tr

单击时，您可以跳跳虎复选框单击事件

$(':checkbox').change(function (event) {
    $(this).parents('tr').toggleClass('selected', this.checked).addClass("checkbox");
});

// when click on tr it trigger checkbox click event
$('tr').click(function(event) {
  if(!$(this).is('.checkbox')) {
   $(this).find('input[type="checkbox"]').click(); 
  }
  $(this).removeClass('checkbox');
});

---

更新在复选框中使用巧妙的方法防止双重效果

再添加一个事件侦听器

$('tr').on('click',function(){
   $(this).toggleClass('selected');
});

并在您的

复选框中添加
e.stopPropagation（）
-

$(':checkbox').change(function (e) {
        e.stopPropagation();
        $(this).parents('tr').toggleClass('selected', this.checked);
}).change();

还为
tr
添加单击事件：

<script type="text/javascript">
    $(':checkbox').change(function () {
        $(this).parents('tr').toggleClass('selected', this.checked);
    }).change();

    $("tr").click(function(){
        if($(this).find(":checkbox").is(":checked"))
           $(this).find(":checkbox").attr("checked",false); 
        else
           $(this).find(":checkbox").attr("checked",true);

        $(":checkbox").change();
    });
</script>


$（'：复选框'）。更改（函数（）{
$（this.parents（'tr'）.toggleClass（'selected'，this.checked）；
}).change（）；
$（“tr”）。单击（函数（）{
如果（$（this.find（“：checkbox”）.是（“：checked”））
$（this.find（“：checkbox”）.attr（“checked”，false）；
其他的
$（this.find（“：checkbox”）.attr（“checked”，true）；
$（“：复选框”）.change（）；
});
它工作得很好，但只有在我单击时才起作用。当我点击复选框时，什么都没有发生（除了现在，当我点击它时，它也不起作用），你必须检查e.target。如果e.target==复选框，则不要为tr触发click事件。@Axwell，这是因为单击输入就是单击tr并调用这两个函数（这两个函数有点相互取消），您需要设置一个条件
if（$（event.target）.is（input））返回false@Arjun使用
prop
，而不是
attr
！对于优化：
[type=“checkbox”]
而不是
'：checkbox'
和最后的
$（this）.find（“[type='checkbox']”）prop（'checked'，function（）{return！this.checked；}）@Karl AndréGagnon你能发布正确的版本吗？我不懂js，所以对我来说很难。应该是
.prop（'checked'，function（）{return！this.checked；}）使其切换。50%有效。单击复选框不起作用。您想使用
最近的（“tr”）
而不是
父项（“tr”）
。
<script type="text/javascript">
    $(':checkbox').change(function () {
        $(this).parents('tr').toggleClass('selected', this.checked);
    }).change();

    $("tr").click(function(){
        if($(this).find(":checkbox").is(":checked"))
           $(this).find(":checkbox").attr("checked",false); 
        else
           $(this).find(":checkbox").attr("checked",true);

        $(":checkbox").change();
    });
</script>