javascript 如何隐藏复选框文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18466121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide checkbox text
提问by jizco Borneo
I have been playing around with html lately and ran into a slight issue.
我最近一直在玩 html 并遇到了一个小问题。
Let us say that there is a form with multiple elements on it. Some of those elements are checkboxes, and you want to hide the checkboxs and their corresponding text. How do you do this without hiding the entire form? The following is what I have tried so far:
假设有一个包含多个元素的表单。其中一些元素是复选框，您希望隐藏复选框及其相应的文本。您如何在不隐藏整个表单的情况下执行此操作？以下是我迄今为止尝试过的：
<input type="checkbox" id=check1 status="display:none">Option 1<br>
But this hides the box and leaves the text "Option 1" still visible. How do I hide the text as well?
但这会隐藏框并使文本“选项 1”仍然可见。我如何隐藏文本？
回答by insertusernamehere
I would suggest using the <label>-tag around the whole thing:
我建议<label>在整个事情中使用-tag：
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>
This way you can hide the whole line and the user has the advantage that the checkbox toggles, if he clicks the text. You also gain in semantics.
通过这种方式，您可以隐藏整行，并且用户可以在单击文本时切换复选框获得优势。你也获得了语义。
Also note that statusis not a valid attribute. For styling use style.
另请注意，这status不是有效的属性。用于造型style。
回答by Arun P Johny
you need to wrap it in a span/label and then hide it
您需要将其包装在跨度/标签中，然后将其隐藏
<input type="checkbox" id=check1 style="display:none"><label for="check1" style="display:none">Option 1</label><br>
回答by CodePuppet
Wrap the input in a div and apply the "style" tag to the div.
将输入包装在一个 div 中，并将“样式”标签应用于该 div。
<div style="display: none;">
<input type="checkbox" id="check1">Option 1<br>
</div>
回答by Saranya Sadhasivam
Place checkbox inside div and apply style to div
将复选框放在 div 内并将样式应用于 div
<div style="display:none"><input type="checkbox" id=check1>Option 1<br></div>
回答by mattytommo
I'm sure you mean style="display:noneand not status, but here goes:
我确定你的意思style="display:none不是status，但这里是：
Your option text isn't inside the input, nor can it be (for a checkbox), so you'll have to wrap them in a container, then hide the container. Something like:
您的选项文本不在输入中，也不能（对于复选框），因此您必须将它们包装在容器中，然后隐藏容器。就像是：
<div id="checkboxcontainer" style="display: none">
<input type="checkbox" id="check1">
Option 1
<br>
</div>
回答by maximkou
<input type="checkbox" id="check1" style="display:none">
<label for="check1">Option 1</label><br>
JS:
JS：
$('label[for="check1"]').hide();
回答by rajesh kakawat
try something like this
尝试这样的事情
<label style="display:none"><input type="checkbox" id=check1 >Option 1</label>
回答by krishna
see this jquery ...this may help you
看到这个 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");
}
});
});
回答by ngplayground
Use the below to get your desired need.
使用以下内容来满足您的需求。
Wrap the entirety with a labelwhich will then allow you to use style="display:noneto hide the label.
用 a 包裹整个内容，label然后您就可以使用它style="display:none来隐藏label.
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>
You also used statusinstead of stylebut by using the code above you'll do fine.
您还使用了status而不是style但是通过使用上面的代码，您会做得很好。
回答by Jari Thorup Palo
Okay, since the other answers were not that describing i can go ahead and be a little more pedagogic. First of all, the code you have written is perfectly fine, however you lose some control over your content if it's not wrapped inside a HTML tag. As all the other answers here wrote, you obviously need a label with your input tag:
好的，因为其他答案不是描述我可以继续进行更多的教学。首先，您编写的代码非常好，但是如果内容没有包含在 HTML 标记中，您将失去对内容的一些控制。正如这里的所有其他答案所写的那样，您显然需要一个带有输入标签的标签：
<input type="checkbox" id="check1"><label for="check1" >Option 1</label>
You have got some different ways of using labels (which is recommended since this gives you more control over your content). My example above uses the "for" attribute, which is a pointer to the input ID to tell the browser what input field the label is for (quite obvious, eh?). You can also wrap your input inside the label (like all the other answers to this thread), which is the way some people prefers (including me):
您有一些使用标签的不同方式（推荐使用这种方式，因为这可以让您更好地控制您的内容）。我上面的例子使用了“for”属性，它是一个指向输入 ID 的指针，告诉浏览器标签用于哪个输入字段（很明显，嗯？）。您还可以将您的输入包装在标签内（就像该线程的所有其他答案一样），这是一些人（包括我）喜欢的方式：
<label for="check1"><input type="checkbox" id="check1">Option 1</label>
I saw an answer where the person who wrote some (what he called) JS which is code that hides the label with a wrapped input (i.e. the label AND the input is hidden). However, this was JS that is also using jQuery, so you need to implement that framework before you can use that code snippet:
我看到了一个答案，其中写了一些（他称之为）JS 的人是用包装输入隐藏标签的代码（即隐藏标签和输入）。但是，这是也使用 jQuery 的 JS，因此您需要先实现该框架，然后才能使用该代码片段：
$('label[for="check1"]').hide(); //This hides the label and the input at the same time if you wrap your input!
I recommend you to use the wrapped version of the markup, and implementing jQuery on your page and thereafter apply the codesnippet that is provided in this answer. That can give you the power to show/hide the inputs + labels on, for example, a click on a button or so. Feel free to ask me anything if you want some guidance. :)
我建议您使用标记的包装版本，并在您的页面上实现 jQuery，然后应用此答案中提供的代码片段。这可以使您能够显示/隐藏输入 + 标签，例如，单击按钮等。如果您需要一些指导，请随时问我任何问题。:)
/J.
/J。
