HTML中的三态复选框？

Question

HTML中没有办法使用三态检查按钮(是,否,为null),对吧？

是否有任何简单的技巧或解决方法,而不必自己呈现整个事物？

Answer 1

编辑 - 感谢Janus Troelsen的评论,我发现了一个更好的解决方案:

HTML5为被调用的复选框定义了一个属性 indeterminate

请参阅w3c参考指南.要使复选框显示在视觉上不确定,请将其设置为true:

element.indeterminate = true;

这是Janus Troelsen的小提琴.但请注意:

• 该indeterminate国不能在HTML标记来设置,它只能通过Javascript完成(见本的jsfiddle测试,这在CSS技巧详细的文章)

• 此状态不会更改复选框的值,它只是一个屏蔽输入实际状态的可视提示.

• 浏览器测试:在Chrome 22,Firefox 15,Opera 12和IE7中为我工作.关于移动浏览器,iOS 3.1上的Android 2.0浏览器和Safari移动版不支持它.

以前的答案

另一种方法是使用复选框透明度对于"某些选定的"状态发挥(如Gmail中不使用在以前的版本做).它需要一些javascript和一个CSS类.这里我放了一个特定的例子来处理带有可检查项目的列表和一个允许选择所有/不包含它们的复选框.选中某些列表项时,此复选框显示"某些选定"状态.

给定一个带有ID的#select_all复选框和带有类的几个复选框.select_one,

淡出"全选"复选框的CSS类如下:

.some_selected {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

处理select all复选框的三态的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/

希望有所帮助!

Answer 2

您可以在元素上使用HTML的indeterminateIDL属性input.

Answer 3

我的提议将使用

• 三个状态的三个适当的unicode字符,例如❓,✅,❌
• 纯文本输入字段(大小= 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='&#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>

Answer 4

您可以使用单选组来实现该功能：

<input type="radio" name="choice" value="yes" />Yes
<input type="radio" name="choice" value="No" />No
<input type="radio" name="choice" value="null" />null

Answer 5

indeterminate这是使用上述属性的可运行示例：

const indeterminates = document.getElementsByClassName('indeterminate');
indeterminates['0'].indeterminate  = true;

<form>
  <div>
    <input type="checkbox" checked="checked" />True
  </div>
  <div>
    <input type="checkbox" />False
  </div>
  <div>
    <input type="checkbox" class="indeterminate" />Indeterminate
  </div>
</form>

只需运行代码片段即可查看其外观。