使用javascript部分选中复选框

Question

有没有一种方法可以使用Javascript和HTML(5)使复选框部分选中，就像程序安装菜单中的复选框只选择了一些子选项一样？

Answer 1

HTML5 defines indeterminate布尔值属性。

我只在最新的Safari、Chrome和Firefox上测试过它。它们都支持不确定状态。

示例：http://jsfiddle.net/5tpXc/

编辑：请注意，这不适用于较旧的浏览器，也可能不适用于当前版本的IE。如果你想支持所有的浏览器，你需要依赖这里的其他答案中描述的hack。

Answer 2

不是的。您必须制作一个自定义复选框图形并伪造它。

HTML5编辑：有关在兼容的浏览器中部分选中框的方法，请参阅@Kassen's answer。

Answer 3

HTML复选框(即checkbox类型的input元素)没有第三种状态(部分选中)。因此，没有直接的方法可以做到这一点。

您可能需要做的是制作一个自定义复选框外观的图像，并绑定到它的各种事件(例如，单击)，以便通过JavaScript将其当前的“状态”存储在hidden表单域中。不过，使用这种方法可能会遇到许多问题。

例如，对于此特定元素，表单的键盘导航可能无法实现。(是否可以使用tab键连接到图像并向其发送键盘事件？我不确定。)

此外，您可以尝试通过JavaScript操作checkbox元素上的自定义属性来存储第三个状态。但是元素本身的渲染没有类似的视觉指示器。您可能会操纵它的样式(颜色、背景颜色、边框颜色等)。试图模仿视觉行为。但您可能无法实现您正在参考的确切视觉样式。

这当然是一个有趣的前景，我对此很感兴趣，我可能会在不久的将来尝试实现类似的东西。但是使用原生复选框元素，这是不可能的。它只有两种状态。

编辑：有关在HTML5中执行此操作的信息，请参阅@kassens' answer。如果由于任何原因，您只能使用以前版本的HTML，那么它将不得不像这里所描述的那样是一种技巧。但是，如果你可以依赖于支持HTML5的用户，那么看起来原生支持就在那里。