为什么隐藏时隐藏复选框的标签？

问题描述：

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

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

哪里是相对于输入的标签吗？ – Jace 2013-05-07 02:37:31

这不是你的问题的答案，但为什么不把它们放在容器中并隐藏容器？ – xaxxon 2013-05-07 02:39:04

@Jace，基于呈现的HTML，它位于同一级别的'input'旁边。如果您将我提供的HTML放在空白页面上，您会看到它旁边呈现的标签（即复选框的文本）。 – 2013-05-07 02:39:13

答

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

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

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

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

答

要添加到罗布的答案，输入标签是自闭的。对于复选框，value属性是隐藏的。所以，你的确会写输入标签后标签：

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

在这种情况下，你需要或者包装容器中的东西，即span标签或包装的标签的文本。

答

试试这个：

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

为什么隐藏时隐藏复选框的标签？

相关推荐