如何隐藏复选框文本答案

【问题标题】：How to hide checkbox text如何隐藏复选框文本
【发布时间】：2013-08-27 12:57:31
【问题描述】：

我最近一直在玩 html，但遇到了一个小问题。

假设有一个表单，上面有多个元素。其中一些元素是复选框，您想要隐藏复选框及其相应的文本。如何在不隐藏整个表单的情况下做到这一点？以下是我迄今为止尝试过的：

<input type="checkbox" id=check1 status="display:none">Option 1<br>

但这会隐藏该框并使“选项 1”文本仍然可见。如何也隐藏文本？

【问题讨论】：

【解决方案1】：

我建议在整个过程中使用<label>-tag：

<label style="display:none"><input type="checkbox" id="check1">Option 1</label>

通过这种方式，您可以隐藏整行，并且用户可以在单击文本时获得复选框切换的优势。您还可以获得语义。

还要注意status 不是有效属性。对于样式使用style。

【讨论】：

【解决方案2】：

将输入包装在一个 div 中并将“style”标签应用到该 div。

<div style="display: none;">
  <input type="checkbox" id="check1">Option 1<br>
</div>

【讨论】：

【解决方案3】：

你需要把它包裹在一个跨度/标签中然后隐藏它

<input type="checkbox" id=check1 style="display:none"><label for="check1" style="display:none">Option 1</label><br>

【讨论】：

【解决方案4】：

在 div 中放置复选框并将样式应用于 div

<div style="display:none"><input type="checkbox" id=check1>Option 1<br></div>

【讨论】：

【解决方案5】：

<span style="display:none"><input ...>Option 1</span>

或更好

<label for="check1" style="display:none"><input id="check1"...>Option 1</label><br/>

【讨论】：

【解决方案6】：

我确定您的意思是 style="display:none 而不是 status，但这里是：

您的选项文本不在输入中，也不能在输入中（对于复选框），因此您必须将它们包装在容器中，然后隐藏容器。比如：

<div id="checkboxcontainer" style="display: none">
    <input type="checkbox" id="check1">
    Option 1
    <br>
</div>

【讨论】：

【解决方案7】：

<input type="checkbox" id="check1" style="display:none">
<label for="check1">Option 1</label><br>

JS：

$('label[for="check1"]').hide();

【讨论】：

【解决方案8】：

试试这样的

 <label style="display:none"><input type="checkbox" id=check1 >Option 1</label>

【讨论】：

【解决方案9】：

使用以下内容来满足您的需求。

用label 包裹整个内容，这样您就可以使用style="display:none 隐藏label。

<label style="display:none"><input type="checkbox" id="check1">Option 1</label>

您还使用了status 而不是style，但使用上面的代码就可以了。

【讨论】：

【解决方案10】：

好的，因为其他答案不是描述我可以继续并更具教学性。首先，您编写的代码非常好，但是如果内容没有包含在 HTML 标记中，您将失去对内容的一些控制。正如这里所有其他答案所写，您显然需要一个带有输入标签的标签：

<input type="checkbox" id="check1"><label for="check1" >Option 1</label>

您有一些使用标签的不同方式（建议您这样做，因为这可以让您更好地控制您的内容）。我上面的示例使用了“for”属性，它是一个指向输入 ID 的指针，用于告诉浏览器标签用于哪个输入字段（很明显，嗯？）。您还可以将您的输入包装在标签内（就像该线程的所有其他答案一样），这是某些人（包括我）喜欢的方式：

<label for="check1"><input type="checkbox" id="check1">Option 1</label>

我看到了一个答案，其中写了一些（他称之为）JS 的人是用包装的输入隐藏标签的代码（即标签和输入被隐藏）。但是，这是也使用 jQuery 的 JS，因此您需要先实现该框架，然后才能使用该代码 sn-p：

$('label[for="check1"]').hide(); //This hides the label and the input at the same time if you wrap your input!

我建议您使用标记的包装版本，并在您的页面上实现 jQuery，然后应用此答案中提供的 coden-p。这可以使您能够显示/隐藏输入+标签，例如，单击按钮左右。如果您需要一些指导，请随时问我。 :)

/J.

【讨论】：