javascript 寻找下一个输入(父？)与jQuery

oxcyiej7 于 2023-05-12 发布在 Java

关注(0)|答案(3)|浏览(118)

我有一个表格里面的复选框，当你点击它，它会相应地改变背景颜色，就像这样...

$("#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>

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

JavaScript

来源：https://stackoverflow.com/questions/1277700/finding-the-next-input-of-a-parent-with-jquery

3条答案

按热度按时间

qco9c6ql1#

您处理的事件是tr单击。父节点是表，所以这不会有帮助。你需要做的就是在this上下文中使用find（）。
我会使用.live来避免多个事件处理程序，当一个事件处理程序就可以了。
假设你在行中只有一个复选框，那么使用下面的方法。（注意，它在tbody中使用tr，以避免在head行上运行此命令）

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

赞(0）回复(0）举报 2023-05-12

kulphzqa2#

你想改变这一点：

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

对此：

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

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

赞(0）回复(0）举报 2023-05-12

cbjzeqam3#

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

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

jQuery Docs on Attributes可能会有一些帮助。
感谢redsquare注意到不需要.parent("tr")。

赞(0）回复(0）举报 2023-05-12

我来回答

javascript 寻找下一个输入(父？)与jQuery

3条答案

相关问题

热门标签

最新问答