三态checkbox在HTML中?

在HTML中没有三态检查button(yes,no,null),对吧?

有没有简单的技巧或解决方法,而不必自己渲染整个事情?

13 Solutions collect form web for “三态checkbox在HTML中?”

编辑

感谢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处理程序切换通过三个状态

请参阅以下示例:

HTML来源:

 <input type='text' style='border: none;' onfocus='this.blur()' readonly='true' size='1' value='&#x2753;' onclick='tristate_Marks(this)' /> 

或者如同在线的javascript:

 <input style="border: none;" id="tristate" type="text" readonly="true" size="1" value="&#x2753;" onclick="switch(this.form.tristate.value.charAt(0)) { case '&#x2753': this.form.tristate.value='&#x2705;'; break; case '&#x2705': this.form.tristate.value='&#x274C;'; break; case '&#x274C': this.form.tristate.value='&#x2753;'; 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表单元素 – 不是吗? 你的用户会看到它在三种状态之一,即选中,未选中和禁用,这将是灰色的,不可点击。 对我来说,这似乎类似于“空”或“不适用”或任何你在第三国家寻找。

带有checkbox插件的jQuery插件“jstree”可以做到这一点。

http://www.jstree.com/documentation/checkbox

-Matt

  • 使用jQuery按比例缩放背景的元素
  • 在XHTML中嵌套跨度标记是否正常?
  • div id和div class之间的区别
  • Bootstrapclosures响应菜单“点击”
  • 触发自动完成而不提交表单
  • 停止LastPass填写表格
  • 参数'fn'不是函数得到的string
  • 如何使用CSS修复Div到页面顶部
  • 最大调用堆栈大小超过错误
  • 跨域iframe问题
  • 如何将光标样式设置为不带hrefs的链接的指针