Jquery单击检查最近的复选框

Posted 2023-03-05

【中文标题】Jquery单击检查最近的复选框

【英文标题】：Jquery click check nearest checkbox

【发布时间】：2013-12-28 08:04:46

【问题描述】：

我正在尝试使用链接来检查带有 jQ​​uery 的复选框。我的 html 是：

<table>
  <tr>
    <td><input type="checkbox" value="test" /></td>
    <td><a class="editbutton" href="#">edit</a></td>
  </tr>
</table>

我一直在玩这个 jquery：

jQuery('.editbutton').click(function($) 
    jQuery(this).closest('[type=checkbox]').attr('checked', true);
);

很遗憾，这不起作用。有什么想法吗？

【问题讨论】：

您听说过 HTML 标签吗？他们在没有任何 javascript 的情况下执行此操作。

@epascarello 将其发布为答案，我当然会赞成。

.closest() 寻找最近的祖先元素。你需要多做一点tree traversal。

@epascarello 我无法控制复选框或 HTML 的大部分内容，因此使用了 jQuery！

【参考方案1】：

使用.prop() 而不是.attr()，因为.prop 用于设置properties。顺便说一句，您的选择器是错误的。 .closest() 将遍历 dom 树。

请阅读以下内容以获得更多参考： .prop().closest()

试试这个，

jQuery('.editbutton').click(function($) 
    jQuery(this).closest('td').prev().find('[type=checkbox]').prop('checked', true);
);

或者按照@kappa 的建议。

jQuery('.editbutton').click(function($) 
    jQuery(this).closest('tr').find('[type=checkbox]').prop('checked', true);
);

DEMO

【讨论】：

如果你只是寻找最近的 tr，你不需要那个prev。

@kappa 我只是想，连接tr 需要更多的遍历。我想对了吗。？请澄清。

对我来说听起来像是微优化。依赖 prev 是很容易受到攻击的——稍后您可能会在两者之间添加另一个单元格。我并不是说你的解决方案是错误的，只是添加了一个替代方案。

@相当vulnerable for future modifications。好点。谢谢你。相应更新。

+1，很好的答案，我希望你实现 toggle check 函数。这就是复选框的意义。