jquery - 为什么我隐藏时复选框的标签没有隐藏？

Question

我有一个复选框：

<input type="checkbox" id="OutOfPocket">Are you okay with paying out-of-pocket for these services?</input>

我有一些jQuery隐藏它：

$('#OutOfPocket').hide();

但问题是该行不会隐藏标签。因此，我尝试了以下命令来隐藏标签，但均未成功：

$('#OutOfPocket').next('label').hide();
$('#OutOfPocket').siblings('label').hide();
$('#OutOfPocket').next('input ~ label').hide();
$('#OutOfPocket').next('span').hide();
$('#OutOfPocket').siblings('span').hide();
$('#OutOfPocket').next('input ~ span').hide();

我需要什么代码来隐藏复选框的文本？

Answer 1

据我所知，<input/>不支持这样的内部文本。从<input>MDN：

允许的内容 - 无，这是一个无效元素。

尽管它可能会在您使用的任何浏览器中显示为标签，但您可能希望使用实际<label>标签作为标签。

<input type="checkbox" id="OutOfPocket"/><label for="OutOfPocket">Are you okay with paying out-of-pocket for these services?</label>

Answer 2

要添加到 Rob 的答案，输入标签是自动关闭的。对于复选框，值属性是隐藏的。所以你确实会在输入标签之后写标签：

<input type="checkbox">Are you okay with paying out-of-pocket for these services?

在这种情况下，您需要将事物包装在容器（即span标签）中，或者将文本包装在标签中。

Answer 3

试试这个：

<label for="OutOfPocket">
<input type="checkbox" id="OutOfPocket"/>
  <span>Are you okay with paying out-of-pocket for these services?</span>
</label>

这允许在您单击文本时选中复选框。

并允许轻松隐藏文本：

$('label span').hide()