Question

我在桌子里面有一个复选框，当你点击它时，它会相应改变背景颜色......

$("#table tr td :checkbox").bind("click change", function() {
    $this = $(this); // cache the jquery object
    if($this.is(':checked')) { $this.closest('tr').css('background-color', 'lightyellow'); }
    else { $this.closest('tr').css('background-color', '#fff'); }
});

这样做很好，但是，我想我想要更好一点，所以你点击桌面行的任何地方，它都会勾选方框并突出显示该行。

我尝试使用此代码，但遗憾的是它不起作用：

$("table tr").bind("click", function() {
    $(this).parents("tr").find(":checkbox").attr('checked');
});

这是HTML代码（删除了过多的东西以提高可读性......

<td>Name</td>
<td>Description</td>
<td><input type="checkbox"></td>

非常感谢任何帮助，谢谢！

Answer 1

您想要更改此内容：

$(this).parents("tr").find(":checkbox").attr('checked');

到此：

$(this).parents("tr").find(":checkbox").attr('checked', 'checked');

否则您所做的只是正在阅读 checked属性，而不是设置它。

Answer 2

您处理的事件是tr click。父是表，所以没有帮助。您需要做的就是使用此上下文中的find（）。

我会使用.live来避免多个事件处理程序。

假设行中只有一个复选框，请使用以下内容。（注意它在tbody中使用tr来避免在thead行上运行它）

$("table>tbody>tr").live("click", function() {
    $(this).find(":checkbox").attr('checked', 'checked');
});

更新

如果您想切换它，请尝试类似

的内容

$("table>tbody>tr").live("click", function(ev) {
        var $checkbox = $(this).find(":checkbox");
        //check to see we have not just clicked the actual checkbox
        if ( !$(ev.target).is(':checkbox') ){
            $checkbox.is(':checked') ? $checkbox.removeAttr('checked')
                                     : $checkbox.attr('checked', 'checked')
        }
 });

Answer 3

我认为你只是忘记设置属性的值。

$("table tr").bind("click", function() {
    $(this).find(":checkbox").attr('checked', 'checked');
});

jQuery Docs on Attributes可能会有所帮助。

归功于 redsquare ，注意到不需要.parent("tr")。

使用jQuery查找（父项？）的下一个输入

3 个答案: