JavaScript：如何从复选框中删除“被按下”状态？

Question

我在复选框上覆盖mousedown事件，以便通过拖动其他复选框来启用选择。这涉及必须执行event.preventDefault()以禁用默认文本选择行为。

除了一个令人讨厌的抽搐之外，一切都按预期工作，即复选框保留在“按下”状态。状态，直到我松开鼠标（如果不清除，请尝试按住鼠标选中复选框以查看我的意思。）

如何将复选框的状态恢复为完全关闭或完全打开（不是＆＃39;被按下＆＃39;）？

编辑：这是我的代码jsfiddle。

Answer 1

你可以做的是通过:active pseudo-class覆盖“按下复选框”状态的一些CSS。

​input[type=checkbox]:active {
    outline: none;
    border: none;
    /* etc...*/
}​​​​​​

但是，这种方法只允许您为此状态定义自己的规则，而不是告诉浏览器在未触摸状态下呈现默认系统复选框。这当然不是防弹的，但在你的情况下可能会令人满意。

为了最大限度地控制外观，您需要实现自定义复选框组件或使用其中一个UI小部件库（如Dojo，ExtJS，UniformJS等）。这些自定义小部件基本上隐藏了真实的<input type="checkbox" />，为您提供了一个“虚假”元素进行交互（但这模仿了原生的UI控件功能，只有它是完全可用的）。