如何隐藏复选框文本

Question

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

让我们说，有一个表单上有多个元素。其中一些元素是复选框，您想要隐藏复选框及其相应的文本。你如何做到这一点而不隐藏整个表单？下面是我到目前为止已经试过：

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

但这隐藏框和离开文本“选项1”仍清晰可见。我如何隐藏文字？

Answer 1

我会建议使用周围的整个事情<label> - 标签：

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

这样，您就可以隐藏整条线和用户的优点是复选框切换，如果他点击文本。你也可以获得语义。

另请注意status不是一个有效的属性。造型使用style。

Answer 2

你需要用它在一个跨度/标签，然后把它隐藏

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

Answer 3

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

或更好

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

Answer 4

股利和应用样式里面放置复选框div的

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

Answer 5

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

你的选择文本不在输入内，也不可以（对于复选框），所以你会将它们包裹在容器中，然后隐藏容器。例如：

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

Answer 6

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

<div 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）是用隐藏的输入隐藏标签的代码（即标签和输入被隐藏）。然而，这是JS，它也使用jQuery，所以你需要实现一个框架，然后才能使用该代码片段：

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

，我建议你使用标记的包装版本，以及实施的jQuery您页面，然后应用此答案中提供的codesnippet。这可以让你显示/隐藏输入+标签，例如，点击按钮左右。如果您想要一些指导，请随时问我任何问题。 :)

/J。