Question

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

我们假设有一个包含多个元素的表单。其中一些元素是复选框，您希望隐藏复选框及其相应的文本。如何在不隐藏整个表单的情况下执行此操作？以下是我到目前为止所尝试的内容：

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

但是这会隐藏框并留下文字＆＃34;选项1＆＃34;仍然可见。我如何隐藏文本？

Answer 1

我建议在整个事情中使用<label> - 标记：

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

通过这种方式，您可以隐藏整行，如果用户单击文本，则用户可以切换复选框。你也获得了语义。

另请注意，status不是有效属性。对于样式，请使用style。

Answer 2

你需要将它包裹在span / label中然后隐藏它

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

或更好

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

Answer 6

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

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

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

Answer 7

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

JS：

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

Answer 8

尝试这样的事情

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

Answer 9

看到这个jquery ......这可能对你有帮助

$(document).ready(function(){

        //Hide div w/id extra
       $("#extra").css("display","none");

        // Add onclick handler to checkbox w/id checkme
       $("#checkme").click(function(){

        // If checked
        if ($("#checkme").is(":checked"))
        {
            //show the hidden div
            $("#extra").show("fast");
        }
        else
        {
            //otherwise, hide it
            $("#extra").hide("fast");
        }
      });

    });

Answer 10

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

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

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

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

Answer 11

好的，因为其他答案不是那个描述我可以继续前进，并且更多一点教学。首先，您编写的代码完全没问题，但是如果内容未包含在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，然后应用此答案中提供的codesnippet。这可以让您显示/隐藏输入+标签，例如点击按钮左右。如果您需要一些指导，请随时问我任何问题。：）

/ J。

如何隐藏复选框文本

11 个答案: