Jquery 突出显示表中的行

我有下面的HTML/jQuery代码，并试图在单击复选框时突出显示表中的一行，但不幸的是，我似乎无法启动它

见下面的代码：

<style type="text/css">
.highlight {
    background-color: yellow;
}
</style>

<tr>
  <td class="t12datavalue" align="center" style=""><input type="checkbox" value="123" name="f01"></td>
  <td class="t12datavalue" style="">123</td>
  <td class="t12datavalue" style="">333</td>
  <td class="t12datavalue" style="">Alex</td>
  <td class="t12datavalue" style="">Smith</td>
</tr>

<script language="javascript" type="text/javascript">
  $(document).ready(function() {
    $('td input[type="checkbox"]').click(function() {
        if ($(this).is(':checked')){
             $(this).parent().parent().addClass('highlight');
        } else if($(this).parent().is('.highlight')) {
             $(this).parent().parent().removeClass('highlight');
        }
    }); 
  }); 
</script>

jQuery 不需要显式检查类是否在tr上，如果类不存在，removeClass将自动失败

我考虑过建议使用toggleClass，但我只是讨论了边缘情况，如果这些复选框中的任何一个设置为默认值或以编程方式选中，那么它将不同步，并且我忘记了第二个参数：p

不过，还是投票吧

CSS tr的背景不可见，必须将其应用于子td

---

.

您唯一的问题是您的手机没有处于待机状态。如果你加上这一点，它就完美地工作了

另外，我会用$this.parentstr替换$this.parent.parent

编辑：

编辑：无论如何。聪明的魔鬼

看一看。Bam，我们有颜色高亮和甜美、简短的jQuery

如果您不想单击，下面是前面提到的性感jQuery：

$(document).ready(function() {
    $('td :checkbox').change(function() {
        $(this).closest('tr').toggleClass('highlight');
    }); 
});

---

对其他答案中的想法进行细化：

$('td :checkbox').bind('change click', function () {
    $(this).closest('tr').toggleClass('highlight', this.checked);
}).change();

我绑定到change和click事件的原因是，在IE中复选框失去焦点后，change会错误地触发，而click不会触发键盘事件

我使用.toggleClass以确保高亮显示与复选框状态同步，尽管处理程序被触发两次，一次是从更改触发，一次是从单击触发

---

最后，我立即触发change事件，以便在DOM ready上正确应用这些类。

如果您想遵循上面的示例，实际上您缺少了一个额外的父级：

$document.readyfunction{ $'td input[type=checkbox]'。单击函数{ 如果$this.is'：选中'{ $this.parent.parent.parent.addClass'highlight'； }否则，如果$this.parent.parent.parent.is'.highlight'{ $this.parent.parent.parent.removeClass'highlight'； } }; }; 注意：您可以对元素使用.html jquery函数来确定它们包含的内容。在我的案例中，我使用了：

---

警报$this.parent.parent.parent.html

我希望上面的例子忽略了这个事实：在我添加它之前它不起作用，在我添加它之后它起作用，所以…$this.parentstr也可以是$this.closesttr。。。无需删除和添加类，只需使用ToggleClasss即可。无需添加和删除，只需切换，兄弟+1即可升级我。这种情况并不经常发生。不过我不知道IE病毒。谢谢你。刚刚意识到你是澳大利亚人。。。真棒：谢谢@alex和@Levi@亚历克斯，我刚才注意到你是昆士兰人：也要感谢你的解决方案。尽管我仍在努力想办法，但我不会放弃。我还有一个checkAll例程，可以选择和取消选择所有复选框行。我如何将其应用于我的checkAll例程，如下所示：$checkAll.clickfunction{$input[name='f01'].attr'checked'，$'checkAll'.is'：checked'；}；你能看到我在moe下面的问题吗？我也想把这个应用到checkAll过程中。谢谢

$('td input[type="checkbox"]').click(function() {
        if ($(this).is(':checked')){
             $(this).parents('tr:eq(0)').addClass('highlight');
        } else {
             $(this).parents('tr:eq(0)').removeClass('highlight');
        }
    });

$(document).ready(function() {
  $('td input:checkbox').click(function() {
    if ($(this).is(':checked')){
      $(this).parents("tr").addClass('highlight');
    } else if($(this).parents("tr").is('.highlight')) {
      $(this).parents("tr").removeClass('highlight');
    }
  }); 
}); 

$(document).ready(function() {
    $('td :checkbox').change(function() {
        $(this).closest('tr').toggleClass('highlight');
    }); 
});

$('td :checkbox').bind('change click', function () {
    $(this).closest('tr').toggleClass('highlight', this.checked);
}).change();