javascript - 如何在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>

上面的问题是，我无法集中注意力checkboxwhen style="display:none"。

为了使checkbox焦点集中，我正在做：

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

如果可能，如何使隐藏的checkbox焦点变得可聚焦？

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>

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>

小提琴

在这种情况下，<label>上面的标签实际上正在接收焦点，当它处于焦点时，其中的所有内容都会有一个焦点边框。

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

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;
}

Answer 4

input可能有一个隐藏属性：

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

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

Answer 5

如果您希望复选框保持其高度和宽度但仅不可见：

.hiddenCheckBox{
    visibility: hidden;
}

如果您希望您的复选框在没有任何高度和高度的情况下不可见：

.hiddenCheckBox{
    display: none;
}

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>

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