Javascript 如何隐藏复选框文本

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

假设有一个表单上有多个元素。其中一些元素是复选框，您希望隐藏复选框及其对应的文本。如何在不隐藏整个表单的情况下执行此操作？以下是我迄今为止所做的尝试：

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

选项1

---

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

您需要将其包装在span/标签中，然后隐藏它

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

选项1

我建议在整个过程中使用

-标记：

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

选项1

通过这种方式，您可以隐藏整行，用户的优势是，如果单击文本，复选框将切换。你在语义学方面也有所收获

还请注意，

status

不是有效的属性。对于样式设置，请使用

style

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

或者更好

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

选项1

将复选框置于div内，并将样式应用于div

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

选项1

我肯定你的意思是

style=“display:none

而不是

状态

，但这里是：

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

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

选择1

将输入包装在div中，并将“style”标记应用于div

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

选项1

试试这样的方法

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

选项1

使用下面的选项来满足您的需求

用一个

标签将整个包装起来，这样您就可以使用
style=“display:none
隐藏
标签了

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

选项1

您还使用了
状态
而不是
样式
，但是使用上面的代码，您会做得很好。
好的，因为其他答案不是描述我的，我可以继续说，更具教育性一点。
首先，您编写的代码非常好，但是如果内容没有包装在HTML标记中，您将失去对内容的一些控制。
正如所有其他答案所写，您显然需要一个带有输入标签的标签：

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

我建议您使用包装版本的标记，并在页面上实现jQuery，然后应用此答案中提供的代码片段。这可以让你显示/隐藏输入+标签，例如，点击按钮等。如果您需要指导，请随时问我任何问题。：）

/J.
这里有一个错误
status=“display:none”
因此请改为
style=“display:none”
9在5分钟内回答。享受奢华的多样性。@Tarsem woops！是的，我在代码中使用了样式，但出于某种原因，我在问题上写了status，但你是对的。注意：当表单元素被包装在
-标记中时，你不一定需要
表示
-属性。“div”代表什么？我在html中经常看到这一点
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>

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

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

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