三态checkbox在HTML中？
在HTML中没有三态检查button（yes，no，null），对吧？
有没有简单的技巧或解决方法，而不必自己渲染整个事情？
编辑
感谢Janus Troelsen的评论，我find了一个更好的解决scheme。
HTML5定义了一个名为indeterminatecheckbox属性
参见w3c参考指南 。 使checkbox出现在视觉上不确定的设置为true：
element.indeterminate = true;
这是Janus Troelsen的小提琴 。 但请注意：
-
indeterminate状态不能在HTML标记中设置，只能通过Javascript完成（参见JSfiddletesting和CSS技巧中的详细文章 ） -
这个状态不会改变checkbox的值，它只是一个视觉提示，掩盖了input的真实状态。
-
浏览器testing：在Chrome 22，Firefox 15，Opera 12以及IE7中为我工作。 对于移动浏览器，iOS 3.1上的Android 2.0浏览器和Safari移动设备不支持它。
以前的答案
另一种方法是使用“某些选定”状态的checkbox透明度（就像Gmail以前的版本所做的那样）。 这将需要一些JavaScript和CSS类。 在这里，我举了一个特殊的例子来处理一个带有可选项目的列表和一个允许select全部/不选中的checkbox。 当某些列表项被选中时，该checkbox显示“某些选定的”状态。
给定一个ID为#select_allcheckbox和多个带有.select_one类的.select_one ，
淡化“全选”checkbox的CSS类将如下所示：
.some_selected { opacity: 0.5; filter: alpha(opacity=50); }
处理select allcheckbox的三态的JS代码如下所示：
$('#select_all').change (function () { //Check/uncheck all the list's checkboxes $('.select_one').attr('checked', $(this).is(':checked')); //Remove the faded state $(this).removeClass('some_selected'); }); $('.select_one').change (function () { if ($('.select_one:checked').length == 0) $('#select_all').removeClass('some_selected').attr('checked', false); else if ($('.select_one:not(:checked)').length == 0) $('#select_all').removeClass('some_selected').attr('checked', true); else $('#select_all').addClass('some_selected').attr('checked', true); });
你可以在这里尝试： http : //jsfiddle.net/98BMK/
希望有所帮助！
您可以在input元素上使用HTML的indeterminate IDL属性 。
我的build议是使用
- 三个状态的三个合适的Unicode字符，例如❓，✅，❌
- 纯文本input字段（大小= 1）
- 无边界
- 只读
- 不显示光标
- onclick处理程序切换通过三个状态
请参阅以下示例：
- http://service.bitplan.com/com/bitplan/tristate/tristate.php
- http://jsfiddle.net/wf_bitplan_com/941std72/8/
HTML来源：
<input type='text' style='border: none;' onfocus='this.blur()' readonly='true' size='1' value='❓' onclick='tristate_Marks(this)' />
或者如同在线的javascript：
<input style="border: none;" id="tristate" type="text" readonly="true" size="1" value="❓" onclick="switch(this.form.tristate.value.charAt(0)) { case '❓': this.form.tristate.value='✅'; break; case '✅': this.form.tristate.value='❌'; break; case '❌': this.form.tristate.value='❓'; break; };" />
Javascript源代码：
<script type="text/javascript" charset="utf-8"> /** * loops thru the given 3 values for the given control */ function tristate(control, value1, value2, value3) { switch (control.value.charAt(0)) { case value1: control.value = value2; break; case value2: control.value = value3; break; case value3: control.value = value1; break; default: // display the current value if it's unexpected alert(control.value); } } function tristate_Marks(control) { tristate(control,'\u2753', '\u2705', '\u274C'); } function tristate_Circles(control) { tristate(control,'\u25EF', '\u25CE', '\u25C9'); } function tristate_Ballot(control) { tristate(control,'\u2610', '\u2611', '\u2612'); } function tristate_Check(control) { tristate(control,'\u25A1', '\u2754', '\u2714'); } </script>
您可以使用不确定的状态： http : //css-tricks.com/indeterminate-checkboxes/ 。 它由开箱即用的浏览器支持，不需要任何外部js库。
您可以使用无线电组来实现该function：
<input type="radio" name="choice" value="yes" />Yes <input type="radio" name="choice" value="No" />No <input type="radio" name="choice" value="null" />null
像@Franz答案，你也可以做一个select。 例如：
<select> <option></option> <option value="Yes">Yes</option> <option value="No">No</option> </select>
有了这个，你也可以给一个具体的价值，将发送的forms，我认为，使用javascript的不确定版本的checkbox，它会发送checkbox的下划线值。
至less，当javascript被禁用时，您可以将其用作callback。 例如，给它一个ID，并在加载事件中将其更改为具有不确定状态的checkbox的JavaScript版本。
我认为最有意义的方式是使用checkboxinput可以具有的readonly属性。 没有CSS，没有图像等; 一个内置的HTML属性！
看小提琴：
http://jsfiddle.net/chriscoyier/mGg85/2/
正如在上一个技巧中所描述的： http : //css-tricks.com/indeterminate-checkboxes/
参考@BoltClock的答案 ，这里是我的解决scheme一个更复杂的recursion方法：
http://jsfiddle.net/gx7so2tq/2/
这可能不是最漂亮的解决scheme，但对我来说工作正常，而且非常灵活。
我使用两个数据对象来定义容器：
data-select-all="chapter1"
和元素本身：
data-select-some="chapter1"
两者具有相同的价值。 在一个checkbox内组合两个数据对象允许recursion地扫描子水平。 因此，需要两个“辅助”function来防止更改触发。
除了上面所提到的，还有jQuery插件也可以帮助：
个别checkbox：
- jQuery-Tristate-Checkbox-plugin： http : //vanderlee.github.io/tristate/
对于树状行为checkbox：
- jQuery的三态： http : //jlbruno.github.io/jQuery-Tristate-Checkbox-plugin/
编辑这两个库都使用“ 不确定 ”checkbox属性，因为Html5中的此属性仅用于样式设置（ https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state ），空值永远不会发送到服务器（checkbox只能有两个值）。
为了能够将这个值提交给服务器，我创build了隐藏的对应字段，使用一些JavaScript填充表单提交。 在服务器端，当然，你需要检查对应的字段而不是原来的checkbox。
我使用了第一个库（独立checkbox），它对于
- 初始化选中，未选中的不确定值
- 使用.val（）函数来获取实际值
- 不能工作。状态（可能是我的错误）
希望有所帮助。
你将需要使用JavaScript / CSS来伪造它。
试试这里的例子： http : //www.dynamicdrive.com/forums/archive/index.php/t-26322.html
有可能禁用 HTML表单元素 – 不是吗？ 你的用户会看到它在三种状态之一，即选中，未选中和禁用，这将是灰色的，不可点击。 对我来说，这似乎类似于“空”或“不适用”或任何你在第三国家寻找。
