如何在HTML中隐藏复选框？

Question

我想隐藏一个复选框checkbox。
但是，当我点击与相应checkbox相关联的标签时，希望checkbox被选中/取消选中。

我还希望checkbox必须能够获得焦点。

我正在做以下操作：

<div class="menuitem">
    <label class="checkbox"><input type="checkbox" value="valueofcheckbox" style="display:none" checked="checked">Option Text</label>
</div>

以上的问题是，当style="display:none"时，我无法让checkbox获得焦点。

为了使checkbox能够获得焦点，我正在做以下操作：

$('input', '.menuitem').focus();

如果可能的话，我该如何让被隐藏的 checkbox 可以获得焦点？

- codeofnode

---

将标签添加 tabindex 属性会起作用吗？ - Niet the Dark Absol

@KnowHowSolutions 嗯... 你能再慢点重复一遍吗？从 DOM 中删除它？真的吗？ - Niet the Dark Absol

你想让它“隐藏”，但你也想让它接收“焦点”并被选中/取消选中？你试图通过这种冗长的矛盾来实现什么目标？当然，肯定有更好的方法...尝试使用<input type="hidden" />来存储/发送任何需要的内容。 - Sparky

将复选框的'name'属性用在标签的'for'属性中，例如：<label for="check">some text</label><input type="checkbox" name="check" style="display: block;"/>。 - Max Leps

做什么事情更好？你从来没有解释过所有这些的目的是什么？（参见Mike Christensen答案的最后一段）。 - Sparky

Answer 1

尝试将复选框的不透明度设置为0。如果你想让复选框脱离文档流，请尝试使用position:absolute，并将复选框偏移一个大数值。

HTML

<label class="checkbox"><input type="checkbox" value="valueofcheckbox" checked="checked" style="opacity:0; position:absolute; left:9999px;">Option Text</label>

- unblevable

---

×┐Öµø┤Õâŵݻvisibility: hidden×Çîõ©ıµİ»display: noneÒÇé - Mike Christensen

我更新了你的fiddle；解决方案有些杂乱，但是重点是检查工作。 fiddle - unblevable

请注意，visibility:hidden会占用空间。 - Dhanuka777

Answer 2

无论是通过visibility: hidden、display: none、opacity: 0.0等方式使元素不被渲染，它们都不会指示出焦点。浏览器不会在空白处绘制焦点边框。

如果你想使文本内容可以被聚焦，这完全可行。你可以将整个元素包装在一个可以接收焦点的元素中（例如超链接），或者使用tabindex属性允许另一个标签获得焦点：

<label tabindex="0" class="checkbox">
  <input type="checkbox" value="valueofcheckbox" style="display:none" checked="checked" />Option Text
</label>

Fiddle

在这种情况下，上面的<label>标签实际上正在接收焦点，当它处于焦点状态时，标签内部的所有内容都将具有焦点边框。

我质疑你的目标是什么。如果您使用隐藏的复选框来内部跟踪某种状态，那么最好使用<input type="hidden" />标签。

- Mike Christensen

---

隐藏的复选框在我的工作中仍然无法获得焦点...您能否编辑并保存小样，以使隐藏的复选框可获得焦点？ - codeofnode

无论如何，您都不能使隐藏元素具有焦点。浏览器不会在“空白”区域绘制焦点环。 - Mike Christensen

@Koka，你到底想要实现什么？你的规格说明只是自相矛盾的练习。把你所有的注意力和精力都集中在这个答案的最后一段。 - Sparky

顺便提一下，复选框是用于内部（隐藏）使用的，以查找该项是否已被选中。 - codeofnode

我还希望它是多选下拉框，所以我必须使用复选框。在多个选择下拉选项的情况下，我还使用一些CSS来显示所选项目。但是不想向最终用户显示复选框。有没有方法可以实现相同的效果而不失去我的复选框？ - codeofnode

Answer 3

这两个类是从HTML Boilerplate main.css中借用的。尽管不是标签而是不可见的复选框将获得焦点。

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

- Victor

Answer 4

input可能具有hidden属性:

label{ cursor:pointer; user-select:none; }
input:checked + span::before {
  content: 'un';
}

<label>
  <input type='checkbox' hidden/>
  <span>check</span>
<label>

- vsync

Answer 5

如果你想让你的复选框保持其高度和宽度，但只是不可见：

.hiddenCheckBox{
    visibility: hidden;
}

如果你想让你的复选框不可见，而且没有任何宽度和高度：

.hiddenCheckBox{
    display: none;
}

- George Carlin

---

复选框无法聚焦，两种方式都不可用，请勿使用。 - Fabian von Ellerts

Answer 6

你需要在类中添加元素类型，否则它将无法工作。

.hide-checkbox { display: none }        /* This will not work! */
input.hide-checkbox { display: none }   /* But this will. */ 

<input class="hide-checkbox" id="checkbox" />
<label for="checkbox">Checkbox</label>

看起来太简单了，但试一下吧！

- davidf