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> on 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()

当我隐藏它时，为什么隐藏了复选框的标签？

3 个答案: