3

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

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

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

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

4

10 回答 10

9

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

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

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

另请注意，这status不是有效属性。用于造型用途style。

于 2013-08-27T12:59:40.130 回答
3

将输入包装在 div 中并将“样式”标签应用于 div。

<div style="display: none;">
  <input type="checkbox" id="check1">Option 1<br>
</div>
于 2013-08-27T13:00:06.603 回答
1

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

<input type="checkbox" id=check1 style="display:none"><label for="check1" style="display:none">Option 1</label><br>
于 2013-08-27T12:59:25.693 回答
1

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

<div style="display:none"><input type="checkbox" id=check1>Option 1<br></div>
于 2013-08-27T13:00:03.570 回答
0

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

用 a 将整个包裹起来label，然后您就可以使用它style="display:none来隐藏label.

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

您也使用status而不是style使用上面的代码，但您会做得很好。

于 2013-08-27T13:09:30.323 回答
0 
<span style="display:none"><input ...>Option 1</span>

或更好

<label for="check1" style="display:none"><input id="check1"...>Option 1</label><br/>
于 2013-08-27T12:59:47.277 回答
0

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

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

<div id="checkboxcontainer" style="display: none">
    <input type="checkbox" id="check1">
    Option 1
    <br>
</div>
于 2013-08-27T13:00:04.000 回答
0 
<input type="checkbox" id="check1" style="display:none">
<label for="check1">Option 1</label><br>

JS：

$('label[for="check1"]').hide();
于 2013-08-27T13:00:29.067 回答
0

尝试这样的事情

 <label style="display:none"><input type="checkbox" id=check1 >Option 1</label>
于 2013-08-27T13:01:01.580 回答
0

好的，因为其他答案不是描述我可以继续并更具教学性。首先，您编写的代码非常好，但是如果内容没有包含在 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，因此您需要先实现该框架，然后才能使用该代码片段：

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

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

/J。

于 2013-08-27T13:29:00.063 回答